Question

无论父级可见性如何，我都需要计算隐藏的元素。

我有这段代码：

close()

在这个例子中，我得到 3 项，所以是正确的。

但是这段代码：

<div id="parent-1">    
    <div class="item" style="display: none;"></div>
    <div class="item" style="display: none;"></div>
    <div class="item"></div>
    <div class="item" style="display: none;"></div>
</div>

<script>
   var hidden_items = $('#parent-1').find('.item:hidden').length;
   console.log (hidden_items);
</script>

我得到 4 元素！因为父是一个隐藏的元素，但我需要得到3。

有什么想法吗？

Answer 1

您可以使用过滤器功能过滤掉显示属性设置为无的元素：

var hidden_items = $('#parent-2 .item').filter(function(){
 return $(this).css('display') == "none"
}).length;

工作代码段

＆＃13;

$(function(){
var hidden_items = $('#parent-2 .item').filter(function(){
 return $(this).css('display') == "none"
 
 }).length;
 alert (hidden_items);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent-2" style="display: none;">    
    <div class="item" style="display: none;">
    <div class="item" style="display: none;">
    <div class="item">
    <div class="item" style="display: none;">
</div>

＆＃13;

Answer 2

这是因为，当隐藏父元素时，它的子元素也将被隐藏。这是自然行为。如果您仍想获取元素而不管其父显示属性如何，请使用.filter及其callBack函数。

var hidden_items = $('#parent-2 .item').filter(function(){
 return this.style.display == "none"
}).length;

无论父可见性如何，都要计算隐藏元

2 个答案:

DEMO