Jquery怎么遍历div里面的div里面的ul的li数量，有代码求修改

Question

function setulwidth(){
var channels=$(".mainchannel").children(".channel");
for(var i=0;i<channels.length;i++){
var uls=channels[i].children("ul")
for(var j=0;j<uls.length;j++){
var linum=0;
var lis=uls[j].children("li");
for(var k=0;k<lis.length;k++){
linum++;
}
uls[i].css("width",linum*360);
}
}
}

我的html里面有一个class为mainchannel的div，这个div里面有N个class为channel的div，
channel的div里面有一个ul里面有数量不定的li，现在我就是要取li数量，我这代码里面有什么不对，
求解？

Answer 1

jquery的 length 属性用以获取包含 jQuery 对象中元素的数目：

$(".a .b li").length;    // a类后代b类中包含的li元素的数量

综合示例如下：

创建Html元素

<div class="box">
<span>点击按钮获取li数量：</span><br>
<div class="content">
<div class="test">
<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
</div>
<div class="test">
<ul>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
  <li>Ralph</li>
</ul>
</div>
<div class="test">
<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
</div>
</div>
<input type="button" value="获取li的数量">
</div>

设置css样式

div.box{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}
div.box span{color:#999;font-style:italic;}
div.content{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}
input[type='button']{height:30px;margin:10px;padding:5px 10px;}
ul{padding:5px 25px;border:2px dashed #cc6699;}

编写jquery代码

$(function(){
$(":button").click(function() {
tol = $(".content .test li").length;
num = $(".content .test ul").map(function() {
return $(this).find("li").length;
}).get().join(',');
alert("不同div下的li数量分别为："+num+",总数为："+tol+"。");
});
})

观察效果

Answer 2

是获取class为mainchannel的div里面总的li数量还是里面每个div中div的li的数量

Answer 3

你的li标签有没有定义样式？
如果有就直接取
jquery 你还用的不熟悉 jquery 基本不用 for 循环。
.each(function() {

})

var num = 0;
// 思路是这样 不过我不确定我写的对，我每次都是试着来，jquery 新手
$("ul", "div.channel").children("li").each(function() {
num++;
});

Answer 4

错误在于，要取得channels中的一条数据的时候，不能用channels[i]，要用channels.eq(i)，下面的uls也是。

最下面那句，uls[i].css("width",linum*360);  中，不应该是参数i吧，我觉得应该是j。

 

这样可以保证给div下的每个ul的宽度赋值。

代码：

function setulwidth(){
 var channels=$(".mainchannel").children(".channel");   
 for(var i=0;i<channels.length;i++){ 
  var uls=channels.eq(i).children("ul");
  for(var j=0;j<uls.length;j++){ 
   var linum=0; 
   var lis=uls.eq(j).children("li"); 
   for(var k=0;k<lis.length;k++){  
    linum++;  
   } 
   uls.eq(j).css("width",linum*2);   
  }
 }
}

注：我这里把基数360改成了2

本回答被提问者采纳

Answer 5

既然是jquery。就用each。