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


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>

在这里插入图片描述

发布了1019 篇原创文章 · 获赞 1913 · 访问量 233万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 精致技术 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览