jquery - 如何使用 jQuery 列出页面中的所有类？

Question

在其他人并不真正关心网站性能并制作了一个非常反性能的 CSS 之后，我得到了一个 eshop，并且由于没有 CSS minifier 可以在如此巨大的 CSS 文件（甚至不是 eshop 自己的）上正确地跨浏览器工作，我决定清除CSS 自己，要做到这一点，我需要页面上使用的类的完整列表 - 如何在 jQuery 中获取页面上使用的类的完整列表？

（例如，我可以循环写入控制台，......而且我正在寻找一个如何在 jQuery 中做而不是一个完整的解决方案（在这样的事情中，我从不相信第三方 x））

Answer 1

jQuery 有一个属性选择器- 只选择具有类属性的元素 :) 然后拆分类属性字符串（对于像class="one two"这样的情况）并将它们添加到数组中（不要忘记检查类是否不为空或不在数组。使用this.valueOf()检查和保存字符串 :)

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

JSFiddle 链接：http: //jsfiddle.net/MWJKL/

Answer 2

Check only elements with the class attribute and split the value so you don't get duplicates

var classes = [];
$('[class]').each(function(){
    $.each($(this).attr('class').split(' '),function(i,className) { 
        if (className.length && $.inArray(className, classes) === -1) {
            classes.push(className);
        }    
    });
});
console.log(classes.join(','));

EDIT Fixed to iterate over an array instead of a jQuery object

Answer 3

$(function(){

    var result = [];    

    $('*').each(function(k, v){

        var classNames = $(v).prop('class');

        if(classNames){

            var classes = classNames.split(' ');

            $.each(classes, function(k2, v2){

                if($.inArray(v2, result) === -1)
                    result.push(v2);
            });
        }

    });

    console.log(result);

});

http://jsfiddle.net/ZQZ8j/1/

Answer 4

尝试

$(function(){
    var temp = {};    

    $('*').each(function(idx, el){
        var classNames = el.className;
        if(classNames){
            var classes = classNames.split(' ');
            $.each(classes, function(idx, clazz){
                temp[clazz] = true;
            });
        }
    });

    var result = $.map(temp, function(value, key){
        return key;
    })
    console.log(result);

});

演示：小提琴

Answer 5

jQuery("*").each(function () {
    var thisEl = jQuery(this);
    var thisClass = thisEl.attr("class");
    if (thisClass != undefined) { console.log(thisClass); }
});

Answer 6

使用 classList 而没有 jQuery 的 ES6 解决方案

var classes = []
document.querySelectorAll('[class]').forEach((node) => {
  node.classList.forEach((className) => {
    classes.push(className)
  })
})
console.log(classes)

Answer 7

我认为您可以使用 Firefox 扩展Dust-Me来查找未使用的 CSS 选择器。

Answer 8

你可以 jQuery有属性选择器

$("*[class]").each(function () {
    var classNames = this.attr("class");
    // Split classNames as shown in other answers
});

它将选择具有该class属性的元素，因此无需添加未定义检查。