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

所以，基于小提琴;

活动元素是：<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块。 / p>

Answer 2

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

工作示例：http://jsfiddle.net/tGypJ/12/

Answer 3

在这部分中“this”并不意味着Li而是文档，因为它不在jquery选择器块中，您可以在打印此alert(this.location)时通过它批准。所以试试这个

$('.cmButtons ul li').each(function(idx, val) {
    if(val.hasClass("active")) {
       var activeLi = val.attr("class").split(" ")[0];
       $('#result').html(activeLi);
    } 
});

Answer 4

简单？ ：

var activeClasses = $('.cmButtons ul li.active').attr('class');
$('#result').html(activeClasses);

演示： http://jsfiddle.net/Mpqfy/

---

所以你可以使用：

var active = $('.cmButtons ul li.active');
var activeClasses = active.attr('class');
$('#result').html(activeClasses);

active.doSomething();