重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
首先了解一下遍历,遍历就是对集合中的每一个元素一个个走一遍(也许表达的不够贴切)。
创新互联建站坚持“要么做到,要么别承诺”的工作理念,服务领域包括:成都网站设计、网站建设、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的红寺堡网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!
像这样
var tmp={1,2,3,4,5,6,7,8,9,10};
for(var i=0;itmp.length;i++)
{
alert(tmp[i]);
}
这就叫遍历了,意思就是这个意思
像$("ul li").each(function(){
alert($(this).text());
});
这样的遍历,其实就是对所有页面里的li元素集合一一遍历
js代码改成如下:
$("#listAdd").on("click",function(){
$("#list").append("li增加的/li")
})
$("#list").on("click", "li", function(){
alert($(this).html());
})
使用jquery的on事件委托来处理动态添加元素动态添加事件。
遍历id为menus 下边的所有li标签:
$('#menus li').each(function(){
alert($(this).text());//$(this)表示当前遍历的li标签对象,这句代码会打印出当前li标签的文本值
});
用$("ul")遍历,然后逐个判断是否有li。判断是否有li有下面3种方法:
$("ul").has("li").length 0;$("ul li").length 0;$("ul").find("li").length 0;
以下是完整代码:
ul111/ul
ul
li1/li
li2/li
/ul
ul333/ul
script src=""/script
script
$("ul").each(function(){
if($(this).find("li").length0)
$(this).hide();
});
/script
jquery的 length 属性用以获取包含 jQuery 对象中元素的数目:
$(".a .b li").length; // a类后代b类中包含的li元素的数量
综合示例如下:
创建Html元素
div class="box"
span点击按钮获取li数量:/spanbr
div class="content"
div class="test"
ul
liJohn/li
liKarl/li
liBrandon/li
/ul
/div
div class="test"
ul
liGlen/li
liTane/li
liRalph/li
liRalph/li
/ul
/div
div class="test"
ul
liJohn/li
liKarl/li
liBrandon/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+"。");
});
})
观察效果