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()方法计算每个{。{1}}类.atom的元素（和子元素）的数量具有

li

Fiddle

/*atomic mass counter*/ $(document).ready(function (mass) { $("li").each(function () { var atomic = $(this).find('.atom').length; $(this).find('.atom').first().html(atomic); }); });点数设置为每个atomic的第一个.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());
    });    
});

这是一个FIDDLE：

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

动态.length jquery函数

2 个答案: