如何在jQuery中检查元素是否具有多个CSS类 [英] How to check if the element has multiple css class in jQuery

问题描述

我有一些类似下面的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>

解决方案

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

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

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

否则，您可以直接进入元素存在

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

实时演示

顺便说一句，您的HTML格式非常不正常，我想说错:
不应在A(内联)元素中找到DIV(块级元素)

I have some html like below. I have loop through the all the elements inside the div(accordionContents).Inside the loop i need to check a condition if the element h2 has applying two css class(acc_trigger and active) or not.How can i do it?

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

解决方案

In your specific case this should be quite enough:

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

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

Otherwise you can go directly for element existence

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

LIVE DEMO

BTW, your HTML formatting is quite unusual, I'd rather say wrong:
DIV (block-level elements) are not supposed to be found inside A (inline) elements

这篇关于如何在jQuery中检查元素是否具有多个CSS类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！