jquery - 如何在jQuery中检查元素是否有多个css类

Question

我有一些像下面这样的html。我已经遍历了 div(accordionContents) 内的所有元素。在循环内我需要检查元素 h2 是否应用了两个 css 类(acc_trigger 和 active) 的条件。我该怎么做？

 <div id="accordionContents">
     <div class="accordioncontainer">         
                    <h2 class="acc_trigger active">
                       <a href="#"> <img class="openImage" src="Images/closed.png"> 
                          <div class="openHeader">Division : <b>Quality Assurance</b>(4 items)</div></a></h2>
                    <div class="acc_container" style="display: block;">
                        <div class="dataRowTeam">
                            <div class="riskStartContent">
                                <div class="riskGridHeader">
                                    weekStart</div>
                            </div>
                            <div class="riskEndContent">
                                <div class="riskGridHeader">
                                    90%</div>
                            </div>
                        </div>
                    </div>

                </div>
                 <div class="accordioncontainer">


                    <h2 class="acc_trigger">
                       <a href="#"> <img class="openImage" src="Images/closed.png"> 
                        <div class="openHeader">Division : <b>Quality Assurance</b>(4 items)</div></a></h2>
                    <div class="acc_container" style="display: none;">
                        <div class="dataRowTeam">
                            <div class="riskStartContent">
                                <div class="riskGridHeader">
                                    weekStart</div>
                            </div>
                            <div class="riskEndContent">
                                <div class="riskGridHeader">
                                    90%</div>
                            </div>
                        </div>
                    </div>

                </div>
</div>

Answer 1

在您的特定情况下，这应该足够了：

var hasActive = $('.acc_trigger').hasClass("active"); // Bool. TRUE / FALSE

if(hasActive){
    // do something if TRUE
}

否则你可以直接去元素存在

$('.acc_trigger.active').css({background: 'red'});

LIVE DEMO

顺便说一句，您的 HTML 格式非常不寻常，我宁愿说错：（
DIV块级元素）不应该在A（内联）元素中找到

Answer 2

只需尝试多次询问 hasClass ;)

$(".accordionContents").each(function(){
    var $headline = $("h2", this).first();
    var hasBothCSSClasses = $headline.hasClass('acc_trigger') & $headline.hasClass('active');
});

Answer 3

试试这个：http: //jsfiddle.net/jH8RF/1/

var clslen = $('h2').attr('class').split(' ').join(',');
var len = clslen.indexOf(',');

if( len > 0){
     alert('elem has more than one class');
}else{
     alert('elem has just one class');
}

Answer 4

试试这个：

$('.accordionContents h2').each(function() {
    if ($(this).is('.acc_trigger.active')) {
        // do something...
    })
});

Answer 5

var strValue = $("h2").prop('class').trim();
if(strValue.indexOf(" ") > -1)
{
    //This element has multiple classes.
}
else
{
    //This element has a single class.
}