<think>
我们正在讨论
jQuery遍历方法。根据引用，
jQuery提供了多种
遍历DOM树和操作元素的方法。以下是一些常见的
遍历方法及其使用示例：
1. **.each() 方法**：用于
遍历一个
jQuery对象中的元素，为每个匹配元素执行函数。
```javascript
//
遍历所有div元素并输出其文本内容
$("div").each(function(index, element) {
console.log(index + ": " + $(element).text());
});
```
2. **.children() 方法**：获取匹配元素集合中每个元素的直接子元素。
```javascript
// 获取ul的所有直接子元素（li）
$("ul").children().css("background-color", "yellow");
```
3. **.find() 方法**：获取匹配元素集合中每个元素的后代元素。
```javascript
// 在div中查找所有span元素
$("div").find("span").css("color", "red");
```
4. **.parent() 方法**：获取匹配元素集合中每个元素的直接父元素。
```javascript
// 获取span的父元素并添加边框
$("span").parent().css("border", "2px solid blue");
```
5. **.parents() 方法**：获取匹配元素集合中每个元素的所有祖先元素（一直到文档根元素）。
```javascript
// 获取li的所有祖先元素
$("li").parents().css("background-color", "lightgray");
```
6. **.siblings() 方法**：获取匹配元素集合中每个元素的所有同辈元素（不包括自身）。
```javascript
// 获取每个li的所有同辈元素
$("li").siblings().css("color", "green");
```
7. **.next() 方法**：获取匹配元素集合中每个元素的下一个同辈元素。
```javascript
// 获取每个li的下一个同辈元素
$("li").next().css("font-weight", "bold");
```
8. **.prev() 方法**：获取匹配元素集合中每个元素的上一个同辈元素。
```javascript
// 获取每个li的上一个同辈元素
$("li").prev().css("text-decoration", "underline");
```
9. **.filter() 方法**：将匹配元素集合缩减为匹配选择器或通过函数测试的元素。
```javascript
// 从所有段落中筛选出带有类名intro的段落
$("p").filter(".intro").css("background-color", "pink");
```
10. **.first() 方法**：将匹配元素集合缩减为集合中的第一个元素。
```javascript
// 获取第一个div并添加样式
$("div").first().css("font-size", "24px");
```
11. **.last() 方法**：将匹配元素集合缩减为集合中的最后一个元素。
```javascript
// 获取最后一个div并添加样式
$("div").last().css("font-size", "24px");
```
12. **.eq() 方法**：将匹配元素集合缩减为指定索引位置的元素。
```javascript
// 获取索引为2的div（第三个div）
$("div").eq(2).css("color", "orange");
```
13. **.end() 方法**：结束当前链中最近的一次筛选操作，并将匹配元素集合返回到之前的状态。
```javascript
// 先找到所有p，然后筛选出有.highlight类的，然后回退到之前的状态（所有p）再添加边框
$("p").filter(".highlight").css("color", "red").end().css("border", "1px solid black");
```
14. **$.each() 方法**：一个通用的迭代函数，用于
遍历对象和数组（静态方法）。
```javascript
//
遍历数组
var arr = ["apple", "banana", "cherry"];
$.each(arr, function(index, value) {
console.log(index + ": " + value);
});
//
遍历对象
var obj = { name: "John", age: 30, city: "New York" };
$.each(obj, function(key, value) {
console.log(key + ": " + value);
});
```
这些方法可以帮助我们方便地操作DOM元素，
遍历数据并执行相应操作。
### 示例：使用$.each()
遍历数组和对象
引用[4]和[5]提供了使用`$.each()`
遍历数组和对象的示例：
```javascript
//
遍历数组
var arr = ['aaa', 'bbb', 'ccc', 'ddd', 'eee'];
$.each(arr, function(idx, val) {
console.log("索引: " + idx + ", 值: " + val);
});
//
遍历对象
var obj = {"冠军": 1,"亚军": 2, "季军": 3,"鼓励奖": 4,"参与奖": 5 };
$.each(obj, function(key, val) {
console.log("奖项: " + key + ", 名次: " + val);
});
```
### 总结
jQuery的
遍历方法提供了强大的DOM操作和数据
遍历能力。通过链式调用，可以简洁高效地完成复杂的DOM操作任务[^1][^2][^3][^4][^5]。
§§相关问题§§
1.
jQuery中.each()和$.each()有什么区别？
2. 如何停止
jQuery的each循环？
3.
jQuery的
遍历方法在性能上有什么注意事项？
4. 如何用
jQuery遍历表格的行和列？
</think>
###
jQuery 遍历方法详解及使用示例
jQuery 提供了丰富的
遍历方法用于操作 DOM 元素集合，以下是主要方法分类及详细示例：
---
#### 一、树
遍历方法
1. **.children()** - 获取直接子元素
```javascript
// 获取ul的所有直接子元素li
$("ul").children("li").css("color", "red");
```
2. **.find()** - 获取后代元素
```javascript
// 在div中查找所有span元素
$("div").find("span").addClass("highlight");
```
3. **.parent()** - 获取直接父元素
```javascript
// 给所有p元素的直接父元素加边框
$("p").parent().css("border", "1px solid blue");
```
4. **.parents()** - 获取所有祖先元素
```javascript
// 获取li的所有上级div元素
$("li").parents("div").fadeOut();
```
5. **.siblings()** - 获取所有同辈元素
```javascript
// 高亮当前li的所有兄弟元素
$("li.active").siblings().css("background", "yellow");
```
6. **.next() / .prev()** - 获取相邻元素
```javascript
// 获取下一个div元素
$("div.current").next().show();
```
---
#### 二、筛选
遍历方法
1. **.filter()** - 筛选匹配元素
```javascript
// 筛选有.active类的div
$("div").filter(".active").hide();
```
2. **.not()** - 排除匹配元素
```javascript
// 排除隐藏的input
$("input").not(":hidden").val("");
```
3. **.eq()** - 获取索引位置元素
```javascript
// 获取第三个li元素
$("li").eq(2).css("font-weight", "bold");
```
4. **.first() / .last()** - 首尾元素
```javascript
// 给第一个表格行加样式
$("tr").first().addClass("header-row");
```
---
#### 三、通用
遍历方法
1. **.each()** -
遍历 jQuery 对象
```javascript
//
遍历所有div并记录索引
$("div").each(function(index) {
console.log(`索引 ${index}: ${$(this).text()}`);
});
```
2. **$.each()** -
遍历数组/对象（静态方法）
```javascript
//
遍历数组
$.each(["a", "b", "c"], (index, value) => {
console.log(`${index}: ${value}`);
});
//
遍历对象
$.each({name: "John", age: 30}, (key, value) => {
console.log(`${key}: ${value}`);
});
```
3. **.map()** - 创建新数组
```javascript
// 获取所有input的值数组
const values = $("input").map(function() {
return $(this).val();
}).get();
```
---
#### 四、链式
遍历方法
1. **.add()** - 添加元素到集合
```javascript
// 选择div并添加相邻的span
$("div").add("span").css("color", "green");
```
2. **.end()** - 返回前一个集合
```javascript
// 先查找子元素再返回父元素
$("ul")
.find("li")
.css("color", "red")
.end() // 返回ul元素
.addClass("highlight-list");
```
---
#### 五、特殊
遍历方法
1. **.contents()** - 获取子节点（包括文本节点）
```javascript
// 统计div中的文本节点
$("div").contents().filter(function() {
return this.nodeType === 3; // 文本节点
}).wrap("<span/>");
```
2. **.closest()** - 获取最近的匹配祖先
```javascript
// 查找最近的包含.form类的父元素
$("input").closest(".form").addClass("active-form");
```
---
### 综合应用示例
```html
<div class="container">
<ul>
<li data-id="1">Item 1</li>
<li class="active" data-id="2">Item 2</li>
<li data-id="3">Item 3</li>
</ul>
<div class="info">Info Panel</div>
</div>
<script>
$(function() {
// 1.
遍历li元素并输出数据
$("li").each(function() {
const id = $(this).data("id");
console.log(`ID: ${id}, Text: ${$(this).text()}`);
});
// 2. 筛选并修改相邻元素
$("li.active")
.next().css("color", "blue")
.prev().css("font-weight", "bold");
// 3. 组合使用多个
遍历方法
$(".container")
.find("ul")
.children()
.filter(":even")
.css("background", "#eee");
});
</script>
```
### 关键要点总结
1. **树
遍历方法**用于导航DOM层级关系[^1][^2]
2. **筛选方法**用于精简元素集合[^3]
3. **$.each()** 支持数组/对象
遍历[^4][^5]
4. **链式调用**通过`.end()`维护操作历史栈
5. **性能优化**：缓存选择器结果避免重复查询
> 实际开发中，推荐根据需求组合使用这些方法，例如使用`.find()`定位区域后再用`.each()`
遍历具体元素[^3]。
扫一扫
724
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
