jQuery do code if class is changed

Question

I'm trying to check does li inside other li having class is-visible, and in that case do nothing, but if it doesn't add style width: 0px.

if (jQuery("li:has(li.is-visible)")){
    //nothing at this moment
}
else {
    jQuery('ul.cd-gallery li').css({'width' : '0px'});
}

html part of code

<ul class="cd-item-wrapper">
        <li data-type="sve" class="is-visible">
        <img class="img-reponsive" src="someimg.jpg" alt="Jabuka" height="150" />
        </li>
        <li data-type="proizvodi" class="is-hidden">
            <img class="img-reponsive" src="someimg.jpg" alt="Jabuka" height="150" />
        </li>
        <li data-type="vocnaci" class="is-hidden">
            <img class="img-reponsive" src="someimg.jpg" alt="Jabuka" height="150" />
        </li>                       
    </ul>
</li>

but I'm using jQuery to change class from is-hidden to is-visible and vice versa. So my code does not see any changes, and I have group all to display all images. If it helps here is link to that page my site

mine Jquery code is good, at least i think, but issue is (if u do inspect element on site) u see bunch of

and wehn u change category i need to hide elements (width:0) that dont't have li > ul > li class="is-visible"

Is http://stackoverflow.com/questions/1950038/jquery-fire-event-if-css-class-changed what you are looking for? — Tien Nguyen, Apr 01 '15 at 14:45
Problem is that there are so many li elements, and in any case at least one have is-visible so i always get same response, have try with 'if (jQuery("li:has(li.is-visible)").length){'and did try all other ideas still no success — Lord of Blood, Apr 02 '15 at 08:33

Nima · Accepted Answer · 2015-04-04T00:00:20.193

3

You can detect if an element has a class either by using hasClass() (which is recommended as it's fastest):

if ( $("li > ul > li").hasClass('is-visible')) {
    //nothing at this moment
} else {
    $('ul.cd-gallery li').css({
        'width', '0px'
    });
}

or is():

if ( $("li > ul > li").is('.is-visible')) {
    //nothing at this moment
} else {
    $('ul.cd-gallery li').css({
        'width', '0px'
    });
}

edited Apr 04 '15 at 00:00

answered Apr 01 '15 at 14:43

Nima

2,100
2
23
32

1

Need the dot for class selector when using `is()`. Also I think the OP missed some of his HTML because he said "li inside other li", so the selectors would need to be `$("li > ul > li.is-visible")`. – Tim Apr 02 '15 at 14:51
Thank you @Tim for the corrections :) I have just updated the answer. – Nima Apr 02 '15 at 15:01

score 0 · Answer 2 · answered Apr 01 '15 at 14:40

0

Use .hasClass() in jquery. The .hasClass() method will return true if the class is assigned to an element, even if other classes also are

if(jQuery("li").hasClass('is-visible')){

}

answered Apr 01 '15 at 14:40

Sudharsan S

15,336
3
31
49

score 0 · Answer 3 · answered Apr 01 '15 at 14:43

0

The check

if (jQuery("li:has(li.is-visible)")){

is always going to be true since it returns a jQuery object. Objects are truthy. It is not like getElementById which returns a falsey value. You would need to check the length.

if (jQuery("li:has(li.is-visible)").length){

Zero would be false and any number would be true.

Other option would be to use is() or hasClass() which returns a Boolean.

answered Apr 01 '15 at 14:43

epascarello

204,599
20
195
236

Was'nt part of OP's question is to do the section of script on change of classes? So how to find/ detect if a certain element class has changed from one to another? – Sai Apr 01 '15 at 14:45
1

Wonder why this is down voted. Valid answer to why it never would go into the else. – epascarello Apr 01 '15 at 18:26

jQuery do code if class is changed

3 Answers3