jquery - 在多个ul中的每一个中计算li并返回值答案

【问题标题】：jquery - count li in each of multiple ul and return valuejquery - 在多个ul中的每一个中计算li并返回值
【发布时间】：2014-04-02 18:01:24
【问题描述】：

使用 jQuery，我如何遍历每个嵌套的 ul.item，计算 LI 的数量，并在该页面上的父 span.someClass 中返回该大小/长度？

<ul>
  <li><span class="someClass">3</span>
    <ul class="item" style="display:none">
      <li>count me</li>
      <li>count me</li>
      <li>count me</li>
    </ul>
  </li>
  <li><span class="someClass">1</span>
    <ul class="item" style="display:none">
      <li>count me</li>
    </ul>
  </li>
  <li><span class="someClass">2</span>
    <ul class="item" style="display:none">
      <li>count me</li>
      <li>count me</li>
    </ul>
  </li>
</ul>

【问题讨论】：

向我们展示您迄今为止尝试过的代码。

标签： jquery html dom

【解决方案1】：

$("ul.item").each(function() {
    // reusabilty
    var context = $(this);
    // count and populate
    context.prev(".someClass").text(context.children().length);
});

如果这些span 元素总是紧邻您的ul 元素之前，则在prev() 调用中省略.someClass。在这种情况下，prev 中的过滤是不必要的，也是多余的。

【讨论】：

【解决方案2】：

试试这个，

Live Demo

 $('.someClass').each(function(){    
     $(this).text($(this).next('ul').find('li').length);
 })

【讨论】：

LI 位于 UL 内部而不是 SPAN 内部。 $(this).next('ul').find('li').length

【解决方案3】：

<html>
<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
         $(function() { 
            var count = 0;
            $('ul').each(function(){
                if(count != 0){

                    var len = $(this).find('li').length;

                    $(this).parent().find('.someClass').html(len);
                }
                count++;

            })  
         });

    </script>
</head>
<body>
<ul>
  <li><span class="someClass"></span>
    <ul class="item" style="display:none">
      <li>count me</li>
      <li>count me</li>
      <li>count me</li>
    </ul>
  </li>
  <li><span class="someClass"></span>
    <ul class="item" style="display:none">
      <li>count me</li>
    </ul>
  </li>
  <li><span class="someClass"></span>
    <ul class="item" style="display:none">
      <li>count me</li>
      <li>count me</li>
    </ul>
  </li>
</ul>
</body>
</html>

【讨论】：

【解决方案4】：

你可以使用text方法：

$('.someClass').text(function(){
   return $(this).next().find('li').length
})

http://jsfiddle.net/EEsRR/

【讨论】：

【解决方案5】：

$("ul.item").each(function() {
    var _c = $(this);
    _c.siblings("span.someClass").html(_c.children("li").length);
});

【讨论】：

【解决方案6】：

使用 jQuery 循环每个<li>：

$(document).ready(function(){

  var howMany;
  // loop through every span.someClass
  $('.someClass').each(function(){
    // loop through every <li> within that span.someClass
    $('li').each(function(){
      // .index() is the current index of the $(this) object, it starts at 0, therefore .index()+1
      howMany = $(this).index()+1;
    });
    // Write your counted <li> in your <span> with .text(), manipulate the text within the <span> tags
    $(this).text(howMany);
  });
});

成功了吗？

【讨论】：

【解决方案7】：

$('#yourelementid > li').length;

这将为您工作，而不是使用任何循环

【讨论】：