jQuery遍历，顾名思义，就是使用jQuery对DOM元素进行遍历，在jQuery中，有多种遍历方法，如：each()、map()、filter()等，本文将详细介绍这些遍历方法的用法和示例。
1、each()方法
each()方法是jQuery中最常用的遍历方法，它可以遍历一个数组或对象，并对每个元素执行指定的操作，each()方法的语法如下：
$(selector).each(function(index, element))
selector是要遍历的元素的选择器，function(index, element)是对每个元素执行的操作。index表示元素的索引，从0开始；element表示当前遍历到的元素。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery遍历示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<ul id="list">
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ul>
<button id="btn">点击我</button>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("#list li").each(function(index, element){
console.log("索引：" + index + "，元素：" + $(element).text());
});
});
});
</script>
</body>
</html>
在这个示例中，当点击按钮时，会遍历id为"list"的无序列表中的每个列表项，并在控制台输出它们的索引和文本内容。
2、map()方法
map()方法也是jQuery中常用的遍历方法，它可以遍历一个数组或对象，并对每个元素执行指定的操作，然后将结果组成一个新的数组返回，map()方法的语法如下：
$(selector).map(function(index, element))
selector是要遍历的元素的选择器，function(index, element)是对每个元素执行的操作。index表示元素的索引，从0开始；element表示当前遍历到的元素，与each()方法不同的是，map()方法需要返回一个值，这个值会被添加到新的数组中。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery遍历示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<ul id="list">
<li class="fruit">苹果</li>
<li class="fruit">香蕉</li>
<li class="fruit">橙子</li>
</ul>
<button id="btn">点击我</button>
<script>
$(document).ready(function(){
$("#btn").click(function(){
var fruits = $("#list .fruit").map(function(index, element){
return $(element).text();
}).get(); // 将结果转换为数组并赋值给变量fruits
console.log(fruits); // 输出：["苹果", "香蕉", "橙子"]
});
});
</script>
</body>
</html>
在这个示例中，当点击按钮时，会遍历id为"list"的无序列表中的所有具有class为"fruit"的元素，并将它们的文本内容组成一个新的数组返回，最后在控制台输出这个数组。
3、filter()方法
filter()方法也是jQuery中常用的遍历方法，它可以遍历一个数组或对象，并对每个元素执行指定的过滤条件，然后返回满足条件的元素组成的新数组，filter()方法的语法如下：
$(selector).filter(function(index, element))
selector是要遍历的元素的选择器，function(index, element)是对每个元素执行的过滤条件。index表示元素的索引，从0开始；element表示当前遍历到的元素，与each()方法和map()方法不同的是，filter()方法需要返回一个布尔值，表示该元素是否满足过滤条件，如果满足条件，该元素会被添加到新的数组中；否则，不会被添加。
示例：
<div id="list">1</div> <div id="list">2</div> <div id="list">3</div> <div id="list">4</div> <div id="list">5</div> <div id="list">6</div> <div id="list">7</div> <div id="list">8</div> <div id="list">9</div> <div id="list">10</div> <button id="btn">点击我</button> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function(){ $("#btn").click(function(){ var evenNumbers = $("#list").filter(function(index, element){ return parseInt($(element).text()) % 2 === 0; }).get(); console.log(evenNumbers); // 输出：["2", "4", "6", "8", "10"] }); }); </script> ``` 在这个示例中，当点击按钮时，会遍历id为"list"的所有div元素，并筛选出其中的偶数元素（即文本内容为偶数的div），然后将这些偶数元素组成的新数组输出到控制台。