jQuery count div,它有一个display:none属性

sco*_*ohh 4 html jquery count

我想计算具有类名"items"并具有属性"style = display:none"的div.

<div id="skills">
<div class="items" style="display:none">1</div>
<div class="items">2</div>
<div class="items">3</div>
<div class="items" style="display:none">4</div>
<div class="items" style="display:none">5</div></div>
Run Code Online (Sandbox Code Playgroud)

输出应该是'3'.

================================================== =========

除了问题:

<div id="skills1">
<div class="items" style="display:none">1</div>
<div class="items">2</div>
<div class="items">3</div>
<div class="items" style="display:none">4</div>
<div class="items" style="display:none">5</div></div>

<div id="skills2">
<div class="items" style="display:none">1</div>
<div class="items" style="display:none">2</div>
<div class="items" style="display:none">3</div>
<div class="items" style="display:none">4</div>
<div class="items" style="display:none">5</div></div>
Run Code Online (Sandbox Code Playgroud)

输出应该是'3'和'5'.

tva*_*son 16

原版的:

var count = $('div.items:hidden').length;
Run Code Online (Sandbox Code Playgroud)

新:

var counts = {};
$('#skills1,#skills2').each( function() {
    counts[$(this).attr('id')] =  $('div.items:hidden', $(this)).length;
}
Run Code Online (Sandbox Code Playgroud)

counts目标将是:

{ skills1 : 3, skills2 : 5 }
Run Code Online (Sandbox Code Playgroud)

持续(?)

$('#skills1,#skills2').each( function() {
    if ($('div.items:hidden',$(this)).length == 0) {
        $(this).hide();
    }
});
Run Code Online (Sandbox Code Playgroud)

如果你给"容器"一个类作为选择器,那就更容易了.然后你可以简单地#skills1,#skills2用类选择器替换,而不是让函数依赖于DIV的名称,这意味着如果你添加另一个容器就不必改变它skills3.您只需要确保为该容器提供正确的类.