jQuery的三种遍历循环

最新推荐文章于 2026-05-27 10:55:12 发布

原创最新推荐文章于 2026-05-27 10:55:12 发布 · 3.7w 阅读

39 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

jQuery

当前文章被收录于：

jQuery

38 篇文章 1 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文详细介绍了在前端开发中使用jQuery进行循环操作的多种方法，包括普通的for循环、$.each方法及li元素的遍历示例。通过具体代码示例，展示了如何高效地遍历DOM元素并获取其内容。

0.总述

for循环

$.each

for in

1.简述

$.each(object,function(index,e){  ...  });    

object --> 需要遍历的对象或数组
index  --> 索引    
e      --> 循环的每个元素

2.代码

<!DOCTYPE html>
<html>
<body>
<ul id="ul">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>
</body>
</html>


<script type="text/javascript" src="js/jquery/jquery-1.11.2.js"></script>
<script type="text/javascript">

	$(function(){

		var lis = $("#ul li");
		
		console.debug("方式①：使用普通for循环   ");
		for(var i=0;i<lis.length;i++){
			var li = lis[i];
			var value = $(li).html();
			console.debug(value);
		}
		
		
		console.debug("方式②：使用jquery方式循环");
		$.each(lis,function(index,obj){  //index:索引obj:循环的每个元素
			var value = $(obj).html();
			console.debug(value);
		}); 
		
		console.debug("方式②：使用jquery方式循环");
		lis.each(function(index,obj){
			var value = $(obj).html();
			console.debug(value);
		});
	});

</script>