複数のレベルにわたるネストされたul-li子の数が常に機能しない場合

Question

動的に生成されるすべてのli要素の横に複数のネストされたレベルにわたってすべての子要素の数を表示しようとしました。

例：私は今

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

を取得しています何：私が使用

コード： サンプル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); 
    }); 

いくつかのレベルで動作しますが、どこでも動作しません。私はどこが間違っているのか分かりません。奇妙なのは、私は計算ロジックにいくつかのコンソールログを残しておき、子カウントの完全なカウントを取得します。 jsオブジェクトは必要な完璧なカウントを示しますが、オブジェクトからattrを選択すると、別の値が表示され、それがナットを駆動しています。

あなたはスクリーンショットで見ることができるように、オブジェクトは2としてカウント数を示していますが、属性の値が1を返し、それが直接の子のデータ-CNTを無視し、次の子のデータ-CNTを取得しているように見えますある場合には。

誰かが問題を特定できますか？

Answer 1

コードは再帰を使用しているようではなく、むしろ深さ（context、context2、context3）を列挙しようとします。 一つの解決策は、他のすべての子供のための複数のレベル検索するfindの代わりchildrenを使用することで、機能自体の中で再帰を使用することです：それは正確にあなたの目標に応じています

$(".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); 
}); 

全くわからないが、しかし、例htmlの結果はこちらにありますfiddle