动态.length jquery函数

Question

我有一个带有子菜单的无序列表。

我有一个无序列表，我希望打印每个列表项包含的子列表项的数量，但是，我编写的函数只返回0。

如果我用类或ID替换$(this)，那么它可以正常工作，但是，它会为每个列表项打印相同的编号，我需要它是动态的，返回每个列表项的.length或.size()。

你能引导我朝正确的方向前进吗？)

/*atomic mass counter*/
$(document).ready(function(mass){

var atomic = $(this).parent('li').length;

$('.atom').html(atomic);

});

类.atom是每个列表项的子类，因此列表如下所示：

<ul>
  <li>
    <div class='atom'></div>
    <ul>
      <li><div class='atom'></div></li>
      <li><div class='atom'></div></li>
    </ul>
  </li>
  <li><div class='atom'></div></li>
  <li><div class='atom'></div></li>
  <li><div class='atom'></div></li>
</ul>

这里有一个JSfiddle：https://jsfiddle.net/6gzau45r/1/

Answer 1

这个答案使用jQuery的.each()方法迭代所有li元素，并使用.find()方法计算每个li有多少类.atom的元素(和子元素)。

/*atomic mass counter*/
$(document).ready(function (mass) {

    $("li").each(function () {

        var atomic = $(this).find('.atom').length;

        $(this).find('.atom').first().html(atomic);

    });

});

小提琴

atomic计数被设置为每个li的第一个.atom元素。

Answer 2

您必须使用.children()查看后代。您的解决方案可能类似于：

$(document).ready(function(mass){
    // For each atom div
    $('.atom').each(function() {
        // Calculates the children li
        $(this).html($(this).parent().children('ul').children('li').size());
    });    
});

这里有一把小提琴：

https://jsfiddle.net/6gzau45r/6/