讲给Android程序员看的前端系列教程(40集免费视频教程+源码)
版权声明
- 本文原创作者：谷哥的小弟
- 作者博客地址：http://blog.csdn.net/lfdfhl
概述
在此，介绍jQuery中常用的遍历元素的方式：
jQuery对象.each(function( ){ })
在each( )中this表示遍历过程中的当前对象，该当前对象为JavaScript对象。
jQuery对象.each(function(index,element){ })
在each( )中element表示遍历过程中的当前对象，该当前对象为JavaScript对象。
在each( )中index表示遍历过程中的当前对象在集合中的索引
在each( )中如果function返回为false表示结束整个循环，其作用类似于break；如果function返回为true表示结束本次循环继续下次循环，其作用类似于continue。
jQuery.each(object, [function( ){ }])
该方式可简写为$.each(object, [function( ){ }])，其作用类似于jQuery对象.each(function( ){ }；故，不再赘述。
jQuery.each(object, [function(index,element){ }])
该方式可简写为$.each(object, [function(index,element){ }])，其作用类似于jQuery对象.each(function(index,element){ })；故，不再赘述。
for(元素对象 of 集合对象)
该方式为jquery 3.0 版本之后提供的方式，其非常类似于java中的增强for循环；故，不再赘述。
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery遍历元素</title>
<!--引入jquery文件 -->
<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
//以JavaScript遍历元素
$("#firstButton").click(function() {
var cityArray = document.getElementsByTagName("li");
for (var i = 0; i < cityArray.length; i++) {
var cityElement = cityArray[i];
var city = cityElement.innerHTML;
if (city == "上海") {
//continue;
break;
}
console.log(city);
}
});
//以jQuery对象.each(function( ){ })遍历元素
$("#secondButton").click(function() {
var cityArray = $("#city li");
cityArray.each(function() {
var city = this.innerHTML;
console.log(city);
var jQueryCity = $(this);
city = jQueryCity.html();
console.log(city);
if (city == "上海") {
return false;
}
});
});
//以jQuery对象.each(function(index,element){ })遍历元素
$("#thirdButton").click(function() {
var cityArray = $("#city li");
cityArray.each(function(index, element) {
var city = element.innerHTML;
console.log(index + " " + city);
var jQueryCity = $(element);
city = jQueryCity.html();
console.log(index + " " + city);
if (city == "上海") {
return false;
}
});
});
//以jQuery.each(object, [function( ){ }])遍历元素
$("#fourthButton").click(function() {
var cityArray = $("#city li");
$.each(cityArray, function() {
var city = this.innerHTML;
console.log(city);
var jQueryCity = $(this);
city = jQueryCity.html();
console.log(city);
if (city == "上海") {
return false;
}
});
});
//以jQuery.each(object, [function(index,element){ }])遍历元素
$("#fifthButton").click(function() {
var cityArray = $("#city li");
$.each(cityArray, function(index, element) {
var city = element.innerHTML;
console.log(index + " " + city);
var jQueryCity = $(element);
city = jQueryCity.html();
console.log(index + " " + city);
if (city == "上海") {
return false;
}
});
});
//以for(元素对象 of 集合对象)遍历元素
$("#sixthButton").click(function() {
console.log("请引入jQuery3.0及其以上版本");
// var cityArray = $("#city li");
// for (li of cityArray) {
// console.log($(li).html());
// }
});
});
</script>
</head>
<body>
<h2 id="author" style="color: red;">本文作者：谷哥的小弟</h2>
<h2 id="blog" style="color: red;">博客地址：http://blog.csdn.net/lfdfhl</h2>
<input type="button" value="以JavaScript遍历元素" id="firstButton" />
<br /><br />
<input type="button" value="以jQuery对象.each(function( ){ })遍历元素" id="secondButton" />
<input type="button" value="以jQuery对象.each(function(index,element){ })遍历元素" id="thirdButton" />
<br /><br />
<input type="button" value="以jQuery.each(object, [function( ){ }])遍历元素" id="fourthButton" />
<input type="button" value="以jQuery.each(object, [function(index,element){ }])遍历元素" id="fifthButton" />
<br /><br />
<input type="button" value="以for(元素对象 of 集合对象)遍历元素" id="sixthButton" />
<br /><br />
<ul id="city">
<li>北京</li>
<li>上海</li>
<li>天津</li>
<li>重庆</li>
</ul>
</body>
</html>
