How to detect if at least one of the li.tst list items has a .count class and then display .msg division ?

<ul>
    <li class="tst 1 na">li</li>
    <li class="tst 2 na">li</li>
    <li class="tst 3 count">li count</li>
    <li class="tst 4 na">li</li>
</ul>
<div class="msg" style="display: none;">has count</div>

Examples:

Has count: true:

<ul>
    <li class="tst 1 count">li</li>
    <li class="tst 2 na">li</li>
    <li class="tst 3 count">li count</li>
    <li class="tst 4 na">li</li>
</ul>
<div class="msg" style="display: block;">has count</div>

Has count: false:

<ul>
    <li class="tst 1 na">li</li>
    <li class="tst 2 na">li</li>
    <li class="tst 3 na">li count</li>
    <li class="tst 4 na">li</li>
</ul>
<div class="msg" style="display: none;">has count</div>

Anyway to do that with Jquery ? I hope this I am not duplicating.

How to detect if at least one of the li.tst list items has a .count class and then display .msg division ?

<ul>
    <li class="tst 1 na">li</li>
    <li class="tst 2 na">li</li>
    <li class="tst 3 count">li count</li>
    <li class="tst 4 na">li</li>
</ul>
<div class="msg" style="display: none;">has count</div>

Examples:

Has count: true:

<ul>
    <li class="tst 1 count">li</li>
    <li class="tst 2 na">li</li>
    <li class="tst 3 count">li count</li>
    <li class="tst 4 na">li</li>
</ul>
<div class="msg" style="display: block;">has count</div>

Has count: false:

<ul>
    <li class="tst 1 na">li</li>
    <li class="tst 2 na">li</li>
    <li class="tst 3 na">li count</li>
    <li class="tst 4 na">li</li>
</ul>
<div class="msg" style="display: none;">has count</div>

Anyway to do that with Jquery ? I hope this I am not duplicating.

• javascript
• jquery

Share Improve this question Follow asked May 2, 2015 at 14:05 IsmailIsmail 74388 silver badges2424 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

You can get all li that has class count, like so

var $msg = $('.msg');

if ($('ul > li.count').length) {
    $msg.show();    
} else {
    $msg.hide();  
}

and then check .length

Example

You can use .filter for this task

 var count = $('ul li').filter(function(){return $(this).hasClass("count");});
 if(count.length)
    $('.msg').show();   

You can check the length of a collection to see if any elements where found

if ( $('.count').length > 0 ) {
    $('.msg').show();
}

or if you want to toggle

$('.msg').toggle( $('.count').length > 0 );