How to detect div don't have child class using jQuery

Question

I have some code like the following:-

 if($('.container').has(':not(.classB)')){ //$(this).addClass('added'); - this code didnt work,i dont know why @@ $('.container').addClass('added'); } //if($('.container').find('.classB').length != 0)

 .added .classA{background: red;}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="classA">AA</div> <div class="classB">BB</div> </div> <div class="container"> <div class="classA">AA</div> </div>

I have tried some ways to detect div don't have classB but it doesn't work. Here is both div affected (added new class). This should be only working with div class 'containter' don't have classB in it (2nd div).

Answer 1

The following might work :

$('.container').each(function(index) {
    // if containing at least one descendant with classB
    if( $(this).find('.classB').length > 0 ) {
        console.log('class B found in container n°'+ index);
        // do your stuff..
    }
    // if not containing any descendants with classB
    if( $(this).find('.classB').length == 0 ) {
        console.log('class B NOT found in container n°'+ index);
        // do your stuff
    }
});

Basically, it will run through all your containers, select all descendants with classB inside each container, and we use length to check if it managed to find some or not.

Note that .find() will go looking for classB in every descendants ( more than 1 level deep), if you want to stop looking at level 1, use .children() instead.

Hope I could help :)

Answer 2

Why not just test for the opposite of .hasClass along with children() ?

Also, your current CSS selector of: .added .classA would only affect elements with a class of classA that are descendants of elements that have class added , which is none of your elements.

 // Loop through the containers $('.container').each(function(){ // If the current container doesn't have any children that use classB... if(!$(this).children().hasClass('classB')){ // Add the added calss to the child in question $(this).children().addClass('added'); } });

 .added { background: red; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="classA">AA</div> <div class="classB">BB</div> </div> <div class="container"> <div class="classA">AA</div> </div>

Answer 3

You could go the other way, and start with any matching children

 $('.classB').parent('.container').addClass('added');

 .added { background: red; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="classA">AA</div> <div class="classB">BB</div> </div> <div class="container"> <div class="classA">AA</div> </div>