jQuery Forum

Dave resolved for me on an earlier posting (jQuery 1.10 | Match counter div class with element id to get length of element id children) a counter solution for one parent group which needed independant counting of div children lengths. I would need the same counting solution (if possible) for ten parent groups. Those ten parent groups will contain the same parent-children div classes and id, but only one group will be visible at any given time, so the hidden groups shouldn't affect the visible group div count, right?

It appears in my current modified setup, there is a counter conflict, meaning whatever children divs have been counted in the first visible parent group, whenever I hide that parent group and make visible another parent group, the counter keeps in memory what has previously been counted and displays the previous count in the new visible parent group at the same children counter divs location of the first parent group.

I tried counter empty(), html(''), even made certain that no id or no class be the same in all div children counters, but to no avail. It's like jQuery or the browser keeps in memory what has been counted first and displays that count in any other counter when a count is requested. I even tried emptying the DOM cache for the counter but no go. Below is sample code on what is going on:

1. <div id ="GROUP-A" class="AllGroups"> // First* visible parent group counted, but now hidden.
2. <div class="VCLA"> 3 </div> // Counter results are accurate.
3. <ol id="VCLA" class="list">
4. <li>SOME STUFF</li> // dynamically appended
5. <li>SOME STUFF</li> // dynamically appended
6. <li>SOME STUFF</li> // dynamically appended
7. </ol>
8. <div class="VCLB"> 2 </div> // Counter results are accurate.
9. <ol id="VCLB" class="list">
10. <li>SOME STUFF</li> // dynamically appended
11. <li>SOME STUFF</li> // dynamically appended
12. </ol>
13. </div>
14. <div id ="GROUP-B" class="AllGroups"> // Visible Parent group counted, with errors.
15. <div class="VCLA"> 3 </div> // ERROR: Counter results should be 6, not 3 as in previous.
16. <ol id="VCLA" class="list">
17. <li>SOME STUFF</li> // dynamically appended
18. <li>SOME STUFF</li> // dynamically appended
19. <li>SOME STUFF</li> // dynamically appended
20. <li>SOME STUFF</li> // dynamically appended
21. <li>SOME STUFF</li> // dynamically appended
22. <li>SOME STUFF</li> // dynamically appended
23. </ol>
24. <div class="VCLB"> 2 </div> // ERROR: Counter results should be 4, not 2 as in previous.
25. <ol id="VCLB" class="list">
26. <li>SOME STUFF</li> // dynamically appended
    
27. <li>SOME STUFF</li> // dynamically appended
    
28. <li>SOME STUFF</li> // dynamically appended
29. <li>SOME STUFF</li> // dynamically appended
30. </ol>
31. </div>

*First means the first group made visible after dom ready, not first as in index position of group.

Any working adaptation to the following code recently updated by Dave would be awesome:

1. $("div[class^=VCL]").each(function(){
2.       var theList = $("#" + $(this).attr("class"));
3.       $(this).html(theList.children().length);
4. });

Thx for helpers ~ dan