jQuery – list all class names
While overhauling a site, I ended up with many obsolete rules in classes that are no longer applied. To help clean up the CSS stylesheet I wanted to list all class names so I could do a comparison. This answer from stackoverflow did 90% of what I needed:
How to make list of all classes in the page using jQuery?
[javascript]
var classes = [];
$('[class]').each(function(){
$($(this).attr('class').split(' ')).each(function() {
if (this.length>0 && $.inArray(this.valueOf(), classes) === -1)
{
classes.push(this.valueOf()); } });
});
console.log("LIST START\n\n"+classes.join('\n')+"\n\nLIST END");
[/javascript]
To run this in a wordpress site I had to enqueue the jQuery library and replace the ‘$’ signs with jQuery so it became:
[javascript]
var classes = [];
jQuery('[class]').each(function(){
jQuery(jQuery(this).attr('class').split(' ')).each(function() {
if (this.length>0 && jQuery.inArray(this.valueOf(), classes) === -1)
{
classes.push(this.valueOf()); } });
});
console.log("LIST START\n\n"+classes.join('\n')+"\n\nLIST END");
[/javascript]