如何在jQuery中获取所有子元素的所有（不同的）类名？答案

【问题标题】：How to get all (distinct) class name of all child element in jQuery?如何在jQuery中获取所有子元素的所有（不同的）类名？
【发布时间】：2014-01-30 15:52:06
【问题描述】：

我有一个这样的列表框

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

我想获取其所有子元素的类名（class1、class2、class3）...如果我能获取所有不同的名称会更好。到目前为止，我已经尝试了以下事情

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

在第一个它给了我其他参数的列表以及类名但是它在第二个返回未定义。

【问题讨论】：

标签： javascript jquery

【解决方案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

【讨论】：

【解决方案2】：

您可以遍历元素并将不同的类名放入某个数组中。

Live Demo

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

【讨论】：

【解决方案3】：

看看你是否想要一个数组中的所有类然后使用：

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

这将输出你所有的类名。

如果你想要不同的类名，比如 class2: 那么：

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

这将输出所有以2 结尾的类名。

或者如果您想获取除此 class2 之外的所有类名，则：

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

这将遍历除以2 结尾的类名之外的每个元素，并将所有类名推到此处。

【讨论】：