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?

 

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"); 

To run this in a wordpress site I had to enqueue the jQuery library and replace the ‘$’ signs with jQuery so it became:

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"); 

Leave a Reply

Your email address will not be published.