JQuery中的几种遍历方法

这是body要遍历的对象

<ul id="city">
    <li>北京</li>
    <li>上海</li>
    <li>天津</li>
    <li>重庆</li>
</ul>

第一种:JS中的for循环方法

var cities = $("#city li");//获取city标签下的所有li标签体,
for (var i = 0; i < cities.length; i++) {
	alert(cities[i].innerHTML);//获得集合中的每个元素对象的html
}

第二种:Jq对象集合.each(function(){})

var cities = $("#city li");//先获取city标签下的所有li标签体对象
cities.each(function () {
	alert(this.innerHTML);//this就是代表集合在集合中的对象.缺点是不能获取索引
 });


cities.each(function (index,element) {//传入了两个参数,
// alert(index+":"+element.innerHTML);//遍历cities中的每个对象,           
// alert(index+":"+$(element).html());//遍历cities中的每个对象,和上一行类似
	if("上海"==$(element).html()){
		return false;//如果有值为"上海",返回false则结束整个循环,类似js中的break语句
	}
	alert(index+":"+$(element).html());
});

第三种:$.each( object集合, function(){} )

$.each(cities,function (index,element) {
     alert(index+":"+$(element).html());//和上一种的区别是,这里的objects可以是集合,也可以是其他类型的数组;
});

第四种:for( ... of ...)

for(li of cities){//和增强for循环类似,li 代表变量,cities代表集合.
     alert($(li).html());//注意只能在jquery 3.0之后的版本中使用这种循环格式
}

来源：CSDN

作者：ZB1139

链接：https://blog.csdn.net/qq_42110350/article/details/103495914

标签

遍历

jquery