本文主要介绍了 jQuery 中一些常见的遍历方法及其用法示例。包括 $.each () 用于遍历数组或对象；children () 返回匹配元素集合中每个元素的所有子元素；find () 返回匹配元素后代中符合选择器条件的元素集合；parent () 返回匹配元素的父元素；parents () 返回匹配元素的所有祖先元素；siblings () 返回匹配元素的所有同胞元素；next () 和 prev () 分别返回匹配元素的下一个和上一个同胞元素；closest () 返回匹配元素向上遍历 DOM 树时遇到的第一个符合选择器的元素。这些方法可以帮助开发者轻松地遍历和操作 DOM 结构。

1. $.each()

$.each() 方法用于遍历数组或对象。

javascript复制代码

var arr = [1, 2, 3, 4, 5];

$.each(arr, function(index, value) {

console.log("Index: " + index + ", Value: " + value);

});



var obj = { name: "John", age: 30, city: "New York" };

$.each(obj, function(key, value) {

console.log("Key: " + key + ", Value: " + value);

});

2. children()

children() 方法返回匹配元素集合中每个元素的所有子元素。

html复制代码

<ul id="list">

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

</ul>



<script>

$("#list").children("li").each(function() {

console.log($(this).text());

});

</script>

3. find()

find() 方法返回匹配元素后代中符合选择器条件的元素集合。

html复制代码

<div id="container">

<div class="item">Item 1</div>

<div class="item">Item 2</div>

<div class="item">Item 3</div>

</div>



<script>

$("#container").find(".item").each(function() {

console.log($(this).text());

});

</script>

4. parent()

parent() 方法返回匹配元素的父元素。

html复制代码

<ul>

<li>Item 1

<ul>

<li>Subitem 1</li>

</ul>

</li>

<li>Item 2</li>

</ul>



<script>

$("li:contains('Subitem 1')").parent().css("background-color", "yellow");

</script>

5. parents()

parents() 方法返回匹配元素的所有祖先元素（直到文档根元素）。

html复制代码

<div class="level-1">

<div class="level-2">

<div class="level-3">Item</div>

</div>

</div>



<script>

$(".level-3").parents().each(function() {

console.log($(this).attr("class"));

});

</script>

6. siblings()

siblings() 方法返回匹配元素的所有同胞元素。

html复制代码

<ul>

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

</ul>



<script>

$("li:eq(1)").siblings().css("color", "red");

</script>

7. next() 和 prev()

next() 方法返回匹配元素的下一个同胞元素，prev() 方法返回匹配元素的上一个同胞元素。

html复制代码

<ul>

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

</ul>



<script>

$("li:eq(1)").next().css("font-weight", "bold");

$("li:eq(2)").prev().css("text-decoration", "underline");

</script>

8. closest()

closest() 方法返回匹配元素向上遍历 DOM 树时遇到的第一个符合选择器的元素。

html复制代码

<div class="container">

<div class="content">

<button class="btn">Click me</button>

</div>

</div>



<script>

$(".btn").click(function() {

var closestDiv = $(this).closest(".container");

closestDiv.css("border", "2px solid blue");

});

</script>

这些示例展示了 jQuery 中一些常用的遍历方法。通过这些方法，你可以轻松地遍历和操作 DOM 结构。