jQuery使用循环显示总li项

时间:2012-06-20 16:36:57

标签: jquery

基本上我想显示包含子ul的每个列表项的总列表项,请参阅我的代码:http://jsfiddle.net/NykJe/

<ul>
    <li>linkA</li>
    <li>linkB<span class="total"></span>
        <ul>
            <li>link2</li>
            <li>link2</li>
            <li>link2</li>
        </ul>
    </li>
    <li>linkC</li>
    <li>linkD<span class="total"></span>
        <ul>
            <li>link2</li>
            <li>link2</li>
            <li>link2</li>
            <li>link2</li>
            <li>link2</li>
        </ul>
    </li>
</ul>

var total = $('ul li ul li').size();
$('.total').append('<div>'+ total +'</div>');

我想使用循环计算每个特定的子项目计数,结果将是LinkB 3和LinkD 5,目前它显示LinkB 8,LinkD 8

2 个答案:

答案 0 :(得分:6)

$('ul li ul').each(function(){
  $(this).prev('.total').append('<div>'+ $(this).find('li').length +'</div>');
});

<强> JSFiddle

答案 1 :(得分:1)

尝试这样的事情。它只是直接在span标签中写出计数,而不是添加一个新元素(如果你想要的话就是不需要额外的标签来插入数字)。

$('.total').each(function()
{
    $(this).html($(this).parent().find('li').length);                    
});

Working example