javascript - 动态 .length jquery 函数

Question

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

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

如果我将 $(this) 替换为类或 ID，那么它可以正常工作，但是，它会为每个列表项打印相同的数字，并且我需要它是动态的，返回每个单独列表项的 .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);

    });

});

Fiddle

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