jQuery each() 方法 是一个循环遍历方法，用于指定为每个匹配元素的执行的函数。

语法

$(selector).each(function(index, element))

参数

function(index,element):是必填参数。它是为每个选定元素执行的回调函数。它有两个参数值，定义如下：
  • index: 它是一个整数值，指定选择器的索引位置。
  • element: 表示当前的元素。我们可以使用这个关键字来引用当前匹配的元素。

例子

例1 

循环li元素的例子

<!DOCTYPE html>
<html>
<head>
<title> jQuery each() 方法例子 </title>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<h2> 欢迎来到 yxjc123.com </h2>
<ul>
<li> 第一个元素 </li>
<li> 第二个元素 </li>
<li> 第三个元素 </li>
<li> 第四个元素 </li>
</ul>
<p>
单击以下按钮可查看 <b> li </b> 元素的列表。
</p>
<button onclick = fun()> 点击看看 </button>
<script>
function fun(){
	$(document).ready(function(){
		$("li").each(function(){
			console.log($(this).text())
		});
	});
}
</script>
</body>
</html>
效果如下

jQuery each() 方法

例2

<!DOCTYPE html>
<html>
<head>
<title> jQuery each() 方法例子 </title>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
body{
	text-align: center;
}
ul{
	list-style-type: none;
	float: left;
}
li {
	width: 40px;
	height: 40px;
	margin: 5px;
	padding: 5px;
	font-size: 20px;
	float: left;
	border: 2px solid blue;
}
button{
	font-size: 20px;
}
</style>
</head>
<body>
<h2> 欢迎来到 yxjc123.com </h2>
<ul>
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
<li id = "i4"> 停止 </li>
<li> 5 </li>
<li> 6 </li>
</ul>
<button onclick = "fun()"> 点击看看 </button>
<p></p>

<script>
function fun(){
	$(document).ready(function(){
		$("li").each(function(index, element) {
			$(element).css("backgroundColor", "green");
			if ($(this).is("#i4")) {
				$("p").text("索引从 0 开始。所以，function停止在位置:" + index ).css("fontSize", "20px");
				return false;
			}
			}
		);
	});
}
</script>

</body>

</html>