jQuery中的遍历
待遍历的html
<ul id="city">
<li>北京</li>
<li>上海</li>
<li>天津</li>
<li>广州</li>
</ul>
1.for循环
jquery对象本身就是一个数组对象,因此我们可以使用for直接遍历
$(function () {
//获取所有的ul下的li
let cities = $("#city li");
//遍历li
for (let i = 0; i < cities.length; i++) {
//获取内容
console.log(i+":"+cities[i].innerHTML);
}
});
2.jquery对象.each(匿名函数)
语法,在each方法中的参数是一个匿名函数:
jquery对象.each(function(index,element){});
* index:元素在集合中的索引
* element:集合中的每一个元素对象
匿名函数返回值:
* true:如果当前function返回为false,则结束循环(break)。
* false:如果当前function返回为true,则结束本次循环,继续下次循环(continue)
代码:
$(function () {
let cities = $("#city li");
cities.each(function (index,element) {
if("北京" == $(element).html()){
//如果当前function返回为false,则结束循环(break)。
//如果返回为true,则结束本次循环,继续下次循环(continue)
return true;
}
console.log(index+":"+$(element).html());
});
});
3.for..of: jquery 3.0 版本之后提供的方式
这个有点像java中的增强for循环
for(元素对象 of 容器对象)
代码:
$(function () {
let cities = $("#city li");
for(li of cities){
console.log($(li).html());
}
});
作者:咸瑜