0

There is a tab section with two tabs - Tab1 & Tab2.
Each tab pane has elements with class card. When one tab is active, the other tab pane is set to 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>

In the above example, the first tab pane is active and the second is hidden. I would like to find out the number of visible card elements in each pane.

In the browser console, if first tab is active and I execute: 

($("#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 here because some of these are also hidden.

How to get the count of the child elements irrespective of the visibility of the tab pane

sukesh
  • 2,379
  • 12
  • 56
  • 111

1 Answers1

1

Give all those hidden card elements a new class 

<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>

Now you can easily get the number of visible card elements by

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

Also the css of your new class will be

.invisible
{ display:none;
}
Gagan
  • 318
  • 1
  • 8