动态 .length jquery 函数

Question

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

我有一个无序列表，我想打印每个列表项包含的子列表项的数量，但是，我写的函数只 returns 0.

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

你能指导我正确的方向吗？ :)

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

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

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

});

class.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

您必须使用 .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());
    });    
});

这是一个FIDDLE:

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

Answer 2

这个答案使用 jQuery 的 .each() method to iterate all li elements and uses .find() 方法来计算每个 li 具有 class.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 元素。

动态 .length jquery 函数

dynamic .length jquery function

javascript

size

jquery

html-lists