jQuery计算具有display:none属性的div数量

Question

我想要计算具有类名“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>

输出应该是“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>

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

- scoohh

Answer 1

抱歉，我只能用英语回答您的问题。

var count = $('div.items:hidden').length;

新内容：

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

counts 对象将会是：

{ skills1 : 3, skills2 : 5 }

最后一项（？）

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

如果您为“容器”指定一个类选择器，那会更容易些。这样，您就可以将#skills1,#skills2简单替换为类选择器，而不必让函数依赖于DIV名称，这意味着如果您添加另一个容器（例如skills3），函数就不必改变。您只需确保给该容器指定正确的类即可。

- tvanfosson

---

谢谢tvanfosson！但我有一个有点复杂的问题。我该如何动态地解决这个问题？请看附加问题。再次感谢您的帮助。 - scoohh

var count = $('div.items:hidden').length;如果“count”等于0且其父ID为“skills1”，则具有ID“skills1”的div将显示“none”。 - scoohh

@scoohh -- 当包含在其中的隐藏元素数量为0或隐藏项目数量等于项目数量时，您想隐藏DIV吗？您最后的评论让我感到困惑。 - tvanfosson

@scoohh -- 我也添加了一个解决方案。由于您是新手，您需要记住投票支持有用的答案，并通过单击投票旁边的复选标记接受最佳答案（前提是它正确）。 - tvanfosson