traversal of jquery array
Original traversal (normal for)
jquery object function traversal (object.each)
- $(“div”).each(function(index,element){ });
Jquery global function traversal ($.each) Important!!!
- $.each(array of objects, function(index,elemen)())
New features of jquery3.0 (enhanced for) Important!!!
//Shortcut key: iter
for(li of liEles){
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
</head>
<script type="application/javascript">
$(function () {
var liEles = $("#city li");
//1:-------------原始遍历（普通for）-----------------
/*
for(var i=0; i<liEles.length;i++){
alert($(liEles[i]).html());
}
*/
//2:-------------jquery对象函数遍历-----------------
//jquery对象.each(function(index,element){});
/*
function 函数时每一次遍历时都会执行
index:是每一次遍历的索引
element:是遍历时数组中的每一个元素对象 liEles[i]
*/
/*
liEles.each(function (i,element) {
alert(i + "----"+ $(element).html())
});
*/
//3:------------- jquery的全局函数遍历-----------------(重点)
// $.each(jquery对象,function(index,element){});
/*
$.each(liEles,function (index,element) {
alert(index + "----"+ $(element).html())
});
*/
//4:------------- jquery3.0新特性遍历(增强for)-----------------(重点)
// java中增强for: for( 数组中元素的类型 变量: 数组的名字){}
// jquery中增强for: for(变量 of 数组的名字){}
// for(element of liEles){
// alert($(element).html());
// }
for (element of liEles) {
alert($(element).html());
}
});
</script>
<body>
<ul id="city">
<li>北京</li>
<li>上海</li>
<li>天津</li>
<li>重庆</li>
</ul>
</body>
</html>
running result:
