How to check if the element has multiple css class in jQuery

Question

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>

i didn't write that code. because i don't know how to check that condtion — Jameel Moideen
– Jameel Moideen, Commented Feb 8, 2013 at 11:41

Roko C. Buljan · Accepted Answer · 2013-02-08 11:51:11Z

4

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

edited Feb 8, 2013 at 11:51

answered Feb 8, 2013 at 11:44

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jameel Moideen Over a year ago

after checking how can i apply a css to a img tag only the h2 element has two css class?

Jameel Moideen Over a year ago

inside the loop i need to apply the css. for example Inside that accordion Content div has more than one accordion container div.Inside this div has h2 element.this h2 element has more than one css i can to apply css to the img tag only.

FibreFoX Over a year ago

just as i mentioned in my comment: addClass is what you need

Roko C. Buljan Over a year ago

@JEMI $('.acc_trigger.active').find('img').addClass('someImageClass')

FibreFoX · Accepted Answer · 2013-02-08 11:34:43Z

0

just try to ask hasClass more than once ;)

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

answered Feb 8, 2013 at 11:34

FibreFoX

2,8581 gold badge21 silver badges42 bronze badges

4 Comments

Joonas Over a year ago

You can put multiple classes inside hasClass() E.g. .hasClass('acc_trigger active'): jsfiddle.net/wU8FJ

Jameel Moideen Over a year ago

after checking How can i apply css to image tag inside that container only the h2 has two css class?

FibreFoX Over a year ago

thats easy, just call .addClass() on the found image if(hasBothCSSClasses) $("img", this).addClass('myspecialClass');

Joonas Over a year ago

@JEMI I don't have the big picture here, but judging from what you said there, I think you might be fine just using css: .acc_trigger.active { color: red; }

Jai · Accepted Answer · 2013-02-08 11:42:46Z

0

Try this: 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');
}

answered Feb 8, 2013 at 11:42

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Comments

Rory McCrossan · Accepted Answer · 2013-02-08 11:43:06Z

0

Try this:

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

answered Feb 8, 2013 at 11:43

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

Comments

Mr_Green · Accepted Answer · 2013-02-08 11:52:56Z

0

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

edited Feb 8, 2013 at 11:52

answered Feb 8, 2013 at 11:44

Mr_Green

42k48 gold badges171 silver badges277 bronze badges

Collectives™ on Stack Overflow

How to check if the element has multiple css class in jQuery

5 Answers 5

4 Comments

4 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related