使用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>
$("ul.item").each(function() {
// reusabilty
var context = $(this);
// count and populate
context.prev(".someClass").text(context.children().length);
});
如果这些span
元素始终紧挨着ul
元素之前,则prev()
调用中省略.someClass
。在这种情况下,prev
过滤是没有必要和多余的。
试试这个,
现场演示
$('.someClass').each(function(){
$(this).text($(this).next('ul').find('li').length);
})
<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>
您可以使用
text
方法:
$('.someClass').text(function(){
return $(this).next().find('li').length
})
http://jsfiddle.net/EEsRR/
$("ul.item").each(function() {
var _c = $(this);
_c.siblings("span.someClass").html(_c.children("li").length);
});
使用 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);
});
});
它有效吗?
$('#yourelementid > li').length;
这将为您工作,而不是使用任何循环