Как динамически заменить часть класса с помощью jQuery?

Question

У меня динамический класс, который начинается с z-. Как я могу динамически изменять z- на fa- onload?

From <a href="#" class="z-dynamic">Link</a> 

to <a href="#" class="fa-dynamic">Link</a> 

Я хочу заменить часть класса, а не весь класс.

Answer 1

Вы можете использовать attribute contains selector и вызвать attr с функцией обратного вызова, чтобы изменить атрибут для каждого элемента. В моем примере я использую метод replace с regular expression, чтобы убедиться, что все классы в списке, начинающиеся с z-, заменяются и только те экземпляры этой строки. Затем просто оберните его в обертку jQuery document ready, и вы готовы к работе.

$(function(){ 
    //Select only the a tags with "z-" in the "class" attribute, and modify the attribute using a callback function. 
    $('a[class*="z-"]').attr('class', function(index, attr) { 
     //Return the updated string, being sure to only replace z- at the start of a class name. 
     return attr.replace(/(^|\s)z-/g, 'fa-'); 
    }); 
}); 

Answer 2

$(document).ready(function(){ 
    var self = $("a.z-dynamic"); 
    self.attr("class", self.attr("class").replace("z-", "fa-")); 
}); 

Это изменит

From <a href="#" class="z-dynamic">Link</a> 

to <a href="#" class="fa-dynamic">Link</a> 

Answer 3

Если у вас есть ссылка на этот узел уже, вы можете легко применить немного регулярных выражений наряду .replace() к Classname.

anchor.className = anchor.className.replace(/z-/, 'fa-');