如何使用jQuery製作頁面中所有類的列表？

我被給了一個eshop，因爲其他人並沒有真正關心網站性能，並且製作了一個真正反性能的CSS，並且由於沒有CSS minifyer正確地在這樣一個巨大的CSS文件（甚至沒有eshop自己的）上運行crossbrowser，我決定要自己清除CSS，要做到這一點，我需要在頁面上使用完整的類列表 - 如何獲得在jQuery頁面上使用的類的完整列表？如何使用jQuery製作頁面中所有類的列表？

（Somtehing我可以如循環寫入控制檯，......我期待，而對於如何在jQuery的做多一個完整的解決方案（在這樣的事情我從來不相信的第三側面X））

來源

2013-08-07 jave.web

檢查此主題http://stackoverflow.com/questions/2787291/use-jquery-to-get-a-list-of-classes – Lukas

這也可以幫助你http://stackoverflow.com/questions/4651834/上傳 - 已知-css-classes-using-javascript –

@Lukas - 謝謝你，但我的問題是更多地探索如何爬過所有元素，實際上我知道如何從一個元素中獲得所有類 - 無論如何，對於其他人來說都是很好的提示！ :) –

jQuery有一個屬性選擇 - 只選擇具有類屬性附加傷害元件:) 然後分裂類屬性的字符串（例等類=「一二」）並將它們添加到陣列（不要忘記檢查類不是空的或不是已經在數組。使用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-07 08:40:21 Aditya

不工作的朋友 – AnaMaria

@aditya編輯，現在像天堂一樣工作！ :) –

當svg元素髮揮作用時，getAttribute（'class'）比attr（'class'）效果更好 – Thiyagesh

我認爲你可以使用Firefox擴展Dust-Me該發現未使用的CSS選擇器。

來源

2013-08-07 08:41:33

Jave.web想爲此使用jquery。 – biphobe

對不起，但@firian是對的，我想在這種情況下避免第三方。 –

$(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-07 08:42:03 Johan

這一個真的很好（投票），但沒有必要通過整個JavaScript範圍，如果我們有JS本地valueOf（）:) –

@ jave.web我知道這可以寫在一個更短，更優化的方式。我是這樣寫的，因爲我的意圖是讓它對不熟悉jQuery的人可讀 – Johan

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

來源

2013-08-07 08:47:37

我給你投票了，因爲它實際上工作，但不正確，它認爲更多的類屬性中的類作爲一個類:) –

你可以jQuery的has attribute selector

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

這將選擇有class屬性，以便無需添加支票不確定因素。

來源

2013-08-07 08:54:31 xyz

你似乎是從其他語言搞砸了 - 這甚至不能工作，因爲你打破了兩件事：class是一個保留的JavaScript字（名字變量「classs」），你正在調用非jQuery對象的jquery attr（）方法...你知道這個：http://jsfiddle.net/eUH7N/ –

你糾正它，現在好多了;） –

僅選中的元素與類屬性和分裂值，因此你不會重複

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對象中

來源

2013-08-07 08:58:43

最後有人誰真的明白我想要什麼輸出:) –

@ jave.web這段代碼和礦。 – Johan

@Johan true。但是這個有更少的空白空間（更可讀）對不起：/無論如何，我給你投票;） –

嘗試

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

來源

2013-08-07 09:03:46

這一個真的很好，我只是考拉的解決方案更:)，傷心你不能選擇第二個最好的答案:( –

如何使用jQuery製作頁面中所有類的列表？

回答

相關問題