您的位置：首页 > Web前端 > JQuery

讲给后台程序员看的前端系列教程(61)——jQuery遍历元素

2019-10-22 11:47 363 查看

C语言自学完备手册(33篇)

Android多分辨率适配框架

JavaWeb核心技术系列教程

HTML5前端开发实战系列教程

MySQL数据库实操教程(35篇图文版)

推翻自己和过往——自定义View系列教程(10篇)

走出思维困境，踏上精进之路——Android开发进阶精华录

讲给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>

谷哥的小弟 博客专家 原创文章 1028获赞 2010访问量 243万+ 关注 他的留言板
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航