Reputation: 2613
I have a HTML like:
<div id="abc">
<li></li>
<li style="display: none;">lorem ipsum</li>
<li></li>
<li style="display: none;">lorem ipsum</li>
<li></li>
</div>
I want to get the count of "li" tags under the "abc id" having style="display: none;". How can I do this?
Upvotes: 0
Views: 28
Reputation: 11750
var getInvisibleLi = function(id) {
return $('#' + id).find('li').not(':visible').length;
}
alert(getInvisibleLi('abc'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="abc">
<li>test</li>
<li style="display: none;">lorem ipsum</li>
<li>test</li>
<li style="display: none;">lorem ipsum</li>
<li>test</li>
</div>
Upvotes: 0
Reputation: 8101
You can use :hidden to get all display:none elements. do:
$( "#abc" ).find( ":hidden" ).length
Upvotes: 1
Reputation: 25527
You can use .not(":visible")
method for that.
$("#abc li").not(":visible").length
Upvotes: 2