如何使用jQuery查找隐藏div的子元素

时间:2019-07-01 10:37:45

标签: jquery

有一个带有两个标签的标签部分-Tab1和Tab2。
每个选项卡窗格都具有类别为card的元素。 一个选项卡处于活动状态时,另一选项卡窗格设置为display:none

<div class="tab-container">
 <div class="tab-pane active" id="tp1">
   <div class="card">...</div>
   <div class="card">...</div>
   <div class="card" style="display:none">...</div>
 </div>
 <div class="tab-pane" id="tp2">
   <div class="card">...</div>
   <div class="card">...</div>
   <div class="card" style="display:none">...</div>
 </div>
</div>

在上面的示例中,第一个选项卡窗格处于活动状态,第二个选项卡窗格处于隐藏状态。 我想找出每个窗格中可见的card元素的数量。

在浏览器控制台中,如果第一个选项卡处于活动状态并且我执行:

($("#tp1 .card:visible")).length //gives 2  which is correct

($("#tp2 .card:visible")).length //gives 0. It has to be 2

($("#tp2 .card")).length //gives 3. I need only the count of visible elements which is 2

:visible在这里,因为其中一些也被隐藏了。

无论标签窗格是否可见,如何获取子元素的数量

1 个答案:

答案 0 :(得分:1)

为所有隐藏的卡片元素提供新的类

<div class="tab-container">
 <div class="tab-pane active" id="tp1">       <div class="card">...</div>
<div class="card">...</div>
<div class="card invisible" >...</div>
 </div> 
<div class="tab-pane" id="tp2"> 
 <div class="card">...</div> 
 <div class="card">...</div> 
 <div class="card invisible">...</div>
</div> 

现在您可以轻松获得可见卡片元素的数量

($("#tp1 .card")).length - ($("#tp1 .card.invisible")).length

您的新课程的CSS也将是

.invisible
{ display:none;
}