Question

我得到了一个电子商店之后，其他人并没有真正关心网站性能，并制作了一个非常反性能的CSS，因为没有CSS minifyer在如此巨大的CSS文件（甚至不是eshop自己的）上正常工作crossbrowser我决定自己清除CSS，为此我需要在页面上使用完整的类列表 - 如何在jQuery中获取页面上使用的完整类列表？

（Somtehing我可以例如循环写入控制台，...而我正在寻找一个如何在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

仅检查具有class属性的元素并拆分值，这样就不会出现重复

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(','));

修改修复了迭代数组而不是jQuery对象

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

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

Answer 5

尝试

$(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);

});

演示：Fiddle

Answer 6

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

Answer 7

你可以jQuery has attribute selector

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

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

Answer 8

使用classList但不使用jQuery的ES6解决方案

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

如何使用jQuery制作页面中所有类的列表？

8 个答案: