遍历
1、js的遍历方式
for(初始值;循环结束条件;步长)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/*
遍历
1、js的遍历方式
for(初始值;循环结束条件;步长)
2、jq的遍历方式
1、jq对象.each(callback)
2、$.each(object,[callback])
3、for..of:
*/
$(function () {
//1、获取所有的ul下的li
var citys = $("#city li");
//2、遍历li
for (var i = 0; i < citys.length; i++) {
if("上海"==citys[i].innerHTML){
//break; //结束循环
continue; //结束本次循环。继续下次循环
}
//获取内容
alert(i+":"+citys[i].innerHTML);
}
});
</script>
</head>
<body>
<ul id="city">
<li>北京</li>
<li>上海</li>
<li>天津</li>
<li>重庆</li>
</ul>
</body>
</html>
2、jq的遍历方式
1、jq对象.each(callback)
<script type="text/javascript">
/*
遍历
1、js的遍历方式
for(初始值;循环结束条件;步长)
2、jq的遍历方式
1、jq对象.each(callback)
2、$.each(object,[callback])
3、for..of:
*/
$(function () {
//1、获取所有的ul下的li
var citys = $("#city li");
//jq对象.each(callback)
citys.each(function (index,element) {
//获取li对象 第一种方式 this
// alert(this.innerHTML);
//alert($(this).html());
//获取li对象 第二种方式 在回调函数中定义函数：index(索引) element(元素对象)
//alert(index+":"+element.innerHTML)
//alert(index+":"+$(element).html())
//判断如果是上海，则结束循环
if ("上海" == $(element).html()){
//如果当前function返回为false，则结束循环（break）
//如果返回为true，则结束本次循环，继续下次循环（continue）
return false;
}
alert(index+":"+$(element).html())
});
});
</script>
2、$.each(object,[callback])
<script type="text/javascript">
/*
遍历
1、js的遍历方式
for(初始值;循环结束条件;步长)
2、jq的遍历方式
1、jq对象.each(callback)
2、$.each(object,[callback])
3、for..of:
*/
$(function () {
//1、获取所有的ul下的li
var citys = $("#city li");
//$.each(object,[callback])
$.each(citys,function () {
alert($(this).html())
})
});
</script>
3、for..of：jquery 3.0版本之后提供的方式
<script type="text/javascript">
/*
遍历
1、js的遍历方式
for(初始值;循环结束条件;步长)
2、jq的遍历方式
1、jq对象.each(callback)
2、$.each(object,[callback])
3、for..of:jquery 3.0版本之后提供的方式
*/
$(function () {
//1、获取所有的ul下的li
var citys = $("#city li");
//for..of:jquery 3.0版本之后提供的方式
for (city of citys) {
alert($(city).html());
}
});
</script>
标签：JQuery,遍历,jq,li,callback,each,citys From： https://www.cnblogs.com/xjw12345/p/16607225.html