如何獲取jQuery中所有子元素的所有（不同的）類名？

Question

我有這樣

<div class="selectdiv"> 
    <select class="mainclass" id="subcat"> 
    <option>Select Category</option> 
<option class="class1" value="val1" >VAL1 </option>        
<option class="class1" value="val2" >VAL2</option>        
<option class="class2" value="val3" >VAL3</option>        
<option class="class2" value="val4" >VAL4</option>        
<option class="class2" value="val5" >VAL5</option>               
<option class="class3" value="val7" >VAL6</option>        
<option class="class3" value="val8" >VAL7</option> 
</select>      
</div> 

一個列表框我想獲得它的所有子元素（1類，等級2，3類）的類名......這將是更好，如果我能得到所有不同的名稱。到目前爲止，我已經嘗試下面的東西

$('#subcat').children('option') 
$('#subcat option').attr('className') 

在其第一次給了我清單，其他參數與類名一起，但它是在第2返回undefined。

Answer 1

如果子元素可以有多個類

var obj = {}; 
$('#subcat').children().each(function() { 
    $.each((this.className || '').split(/\s+/), function (i, v) { 
     obj[v] = true; 
    }) 
}) 
var classes = $.map(obj, function (val, key) { 
    return key == '' ? undefined : key; 
}) 
console.log(classes) 

演示：Fiddle

Answer 2

您可以迭代元素並將不同的類名放入某個數組中。

Live Demo

var classList = []; 
$('#subcat option').each(function() { 
    if (this.className != "" && classList.indexOf(this.className) == -1) 
     classList.push(this.className);  
}); 

Answer 3

見，如果你想在陣列中的所有類，然後使用：

var cls = []; 
$('#subcat').find('option').each(function(){ 
    cls.push(this.className); 
}); 

這會輸出你所有的類名。然後：

var cls = []; 
$('#subcat').find('option[class$="2"]').each(function(){ 
    cls.push(this.className); 
}); 

與2結束這將輸出你所有的類名，如果你想不同類的名字，像只class2

。

，或者如果你想獲得的所有的類名，除了這class2則：

var cls = []; 
$('#subcat').find('option:not([class$="2"])').each(function(){ 
    cls.push(this.className); 
}); 

除了通過與2結束，在此推動所有的類名的類名的每個元素這將循環。