javascript - 多个级别的嵌套 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 中看到