I have a dynamic class that starts with z-. How can I dynamically change z- into fa- onload?
From <a href="#" class="z-dynamic">Link</a>
to <a href="#" class="fa-dynamic">Link</a>
I only want to replace a part of the class, not the whole class.
You could use an attribute contains selector and call attr with a callback function to modify the attribute for each element. In my example, I use a the string replace method with a regular expression to ensure that all classes in the list that start with z- are replaced, and only those instances of that string. Then just wrap it in the jQuery document ready wrapper, and you are ready to go.
$(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-');
});
});
$(document).ready(function(){
var self = $("a.z-dynamic");
self.attr("class", self.attr("class").replace("z-", "fa-"));
});
This will change
From <a href="#" class="z-dynamic">Link</a>
to <a href="#" class="fa-dynamic">Link</a>
dynamic part is unknown.
If you have a reference to that node already, you could easily apply a little regex alongside .replace() to the className.
anchor.className = anchor.className.replace(/z-/, 'fa-');
