Anzahl der verschachtelten UL-li-Kinder über mehrere Ebenen funktioniert nicht immer

Question

Ich habe versucht, die Anzahl aller untergeordneten Elemente über mehrere verschachtelte Ebenen neben allen li-Elementen anzuzeigen, die dynamisch generiert werden.

ZB:

Z(8) 
    A(4) 
     B 
     C(2) 
     D 
     E 
    F(2) 
     G 
     H 

Was ich erhalte jetzt:

Code I verwendet: Beispiel HTML:

<li class="li-item"> 
    <a href="#">B R(None)<span class="count-item" data-cnt="2">[2]</span></a> 
    <ul class="sub-parent-ul 237"> 
     <li class="li-item"> 
     <a href="#">B R(None)<span class="count-item" data-cnt="3">[3]</span></a> 
     <ul class="sub-parent-ul 246"> 
      <li class="li-item"> 
       <a href="#">Bhu Rik(None)<span class="count-item" data-cnt="3">[3]</span></a> 
       <ul class="sub-parent-ul 258"> 
        <li class="li-item"><a href="#">Kai Hiwatari(None)<span class="count-item"></span></a></li> 
        <li class="li-item"> 
        <a href="#">B R(None)<span class="count-item" data-cnt="2">[2]</span></a> 
        <ul class="sub-parent-ul 263"> 
         <li class="li-item"> 
          <a href="#">Bhu Rik(None)<span class="count-item" data-cnt="1">[1]</span></a> 
          <ul class="sub-parent-ul 264"> 
           <li class="li-item"><a href="#">B R(None)<span class="count-item"></span></a></li> 
          </ul> 
         </li> 
        </ul> 
        </li> 
       </ul> 
      </li> 
     </ul> 
     </li> 
    </ul> 
</li> 

JQuery:

$(".sub-parent-ul").each(function() { 
     // reusabilty 
     var context = $(this); 

     // count and populate 
     var count = context.children().length; 

     context.prev("a").children().text('['+count+']'); 
     context.prev("a").children().attr('data-cnt',count); 

    }); 

    $(".sub-parent-ul").each(function() { 
     var context2 = $(this); 

     // count and populate 
     var child_count = context2.children().length; 
     //check for inner ul 
     var sub_count = 0; 
     context2.children('li').each(function() { 
      var context3 = $(this); 
      if(context3.children('a').children('span').attr('data-cnt') !== undefined){ 
       sub_count += +context3.children('a').children('span').attr('data-cnt'); 
      } 
      if(context2.hasClass('G52436')){ 
       console.log(context3.children('a').children('span').attr('data-cnt')); 
       console.log(context3.children('a').children('span').html()); 
       console.log(context3.children('a').children('span')); 
      } 
     }); 
     // final count and populate 

     var tot_count = child_count+sub_count; 

     context2.prev("a").children().text('['+tot_count+']'); 
     context2.prev("a").children().attr('data-cnt',tot_count); 
    }); 

Es funktioniert für einige Ebenen, aber nicht überall. Ich bin mir nicht sicher, wo ich falsch liege. Was komisch ist, ist, dass ich einige Konsolenprotokolle in der Berechnungslogik behalten habe, die die vollständige Zählung der Anzahl der Kinder erhalten. Das js-Objekt zeigt die perfekte Anzahl, die ich brauche, aber wenn ich den Attr aus dem Objekt wähle, zeigt es einen anderen Wert und das macht mich verrückt.

Wie Sie im Screenshot sehen kann, zeigt das Objekt die Zählung als 2, aber der Wert des Attributs zurück 1. Es sieht aus wie es die Daten-cnt der sofortigen Kind ignoriert und bekommen die Daten-cnt nächste Kind in manchen Fällen.

Kann jemand bitte das Problem identifizieren?

Answer 1

Der Code scheint keine Rekursion zu verwenden, sondern versucht eine festgelegte Tiefe aufzuzählen (context, context2, context3). Eine Lösung wäre Rekursion innerhalb der Funktion selbst zu verwenden, ist die andere find statt children zu verwenden, um mehrere Ebenen für alle Kinder suchen:

$(".sub-parent-ul").each(function() { 
     var context = $(this), 
      children = context.find('li'), 
      count = children.length, 
      a = context.prev("a").children(); 
     a.text('['+count+']'); 
     a.data('cnt', count); 
}); 

Nicht ganz sicher, dass es genau das ist nach Ihrem Ziel, aber die Ergebnis für das Beispiel html kann in diesem fiddle