1

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

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

4

8 回答 8

5

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/

于 2013-08-07T08:40:21.090 回答
3

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

于 2013-08-07T08:58:43.307 回答
2
$(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/

于 2013-08-07T08:42:03.550 回答
1

尝试

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

});

演示:小提琴

于 2013-08-07T09:03:46.343 回答
1
jQuery("*").each(function () {
    var thisEl = jQuery(this);
    var thisClass = thisEl.attr("class");
    if (thisClass != undefined) { console.log(thisClass); }
});
于 2013-08-07T08:47:37.633 回答
1

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

var classes = []
document.querySelectorAll('[class]').forEach((node) => {
  node.classList.forEach((className) => {
    classes.push(className)
  })
})
console.log(classes)
于 2018-08-10T15:08:29.627 回答
0

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

于 2013-08-07T08:41:33.253 回答
0

你可以 jQuery有属性选择器

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

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

于 2013-08-07T08:54:31.300 回答