jQuery findClass 并显示这个类是什么？

Question

我试图找到一个具有“active”类的元素，然后回显它具有的其他类，并且仅选择字符串的开头。

HTML:

<div class="cmButtons">
    <ul>
        <li class="cmAuto_btn a active">Auto BTN</li>
        <li class="cmPro_btn a">Pro BTN</li>
        <li class="cmFocus_btn a">Focus BTN</li>
        <li class="cmBright_btn a">Bright BTN</li>
        <li class="cmLow_btn a">Low BTN</li>
        <li class="cmMotion_btn a">Motion BTN</li>
        <li class="cmCustom_btn a">Custom BTN</li>
    </ul>
</div>

CSS:

#result{background:#EEE;border:1px solid #CCC;margin:20px 0;height:30px;line-height:30px;width:500px;}

Javascript(使用 jQuery):

if($('.cmButtons ul li').hasClass("active")){
    var activeLi = $(this).attr("class");
    $('#result').html(activeLi);
}

Demo on JS Fiddle .

所以，基于 fiddle ；

事件元素是:<li class="cmAuto_btn a active">Auto BTN</li>

jQuery 应将类输出为:cmAuto_btn a active

然后 jQuery 应修改字符串以呈现为 cmAuto_btn

我该怎么做？

Answer 1

您需要使用 each 迭代匹配的元素集。然后，您可以按空格分割类名，并获取结果数组的第一个元素:

$('.cmButtons ul li').each(function() {
    if($(this).hasClass("active")) {
       var firstClass = $(this).attr("class").split(" ")[0];
    } 
});

这是一个updated example .

由于下面的注释，这里有一个替代方案(仍然使用 each 以防存在多个 active 类元素):

$('.cmButtons ul li.active').each(function() {
    var firstClass = $(this).attr("class").split(" ")[0];
});

您可能应该使用这个，除非您还需要对没有 active 类的元素执行某些操作，在这种情况下，您可以将上面的示例与 else 阻止。