2012-11-21 8 views
5

Mit jQuery, wie gehe ich durch jede verschachtelte ul.item, zähle die Anzahl der LI, und geben Sie diese Größe/Länge in einer Parent span.someClass auf dieser Seite ?jquery - Zähle li in jedem von mehreren ul und Rückgabewert

<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> 
+3

Zeigen Sie uns, welchen Code Sie bisher versucht haben. –

Antwort

1
<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> 
3

die Sie interessieren,

Live Demo

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

LIs sind innerhalb von UL nicht innerhalb von SPAN. '$ (this) .next ('ul'). Finden ('li'). Length ' –

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

auslassen .someClass in prev() Anruf, wenn diese span Elemente immer sofort vor Ihre ul Elemente sind. In diesem Fall ist eine Filterung in prev nicht notwendig und überflüssig.

1

können Sie text Methode verwenden:

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

http://jsfiddle.net/EEsRR/

+0

ah .. Sie schlagen mich zu –

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

Schleife jeder <li> mit jQuery Trog:

$(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); 
    }); 
}); 

Hat es funktioniert?

+0

nah dies zeigt nur einen Wert, danke aber – dissident

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

Dies wird für Sie arbeiten, anstatt jede Schleife mit