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.看起来它忽略了直接子节点的data-cnt并且在某些情况下获取下一个子节点的data-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

中看到

多个级别的嵌套ul-li子项的计数并不总是有效

1 个答案: