有一个带有两个标签的标签部分-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
在这里,因为其中一些也被隐藏了。
无论标签窗格是否可见,如何获取子元素的数量
答案 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;
}