一旦选择了要修改的带有JQuery的HTML元素，就需要遍历这些元素，以便可以对每个元素进行所需的修改。在本文中，我将深入探讨JQuery中一些最常用的遍历函数。

以下是一些常用的JQuery遍历函数：

• each()
• first()
• last()
• next()
• prev()
• parent()
• children()
• siblings()

首先，假设页面中有以下div：

<div class="contentDiv"> Div</div>
<div class="contentDiv"> Div</div>
<div class="contentDiv"> Div</div>

同样，想像一下，我们想选择这些div元素，并对其进行迭代以某种方式对其进行修改。通过它们的CSS类，选择它们的方法如下：

$(".contentDiv");

现在，我们需要遍历选定的HTML元素。本文的其余部分将向我们展示执行此操作的各种函数。

each()

each()函数使我们可以遍历每个选定的元素。我们将回调函数传递给each()，该函数将为每个选定的元素调用。看起来是这样的：

$(".contentDiv").each( function(index, element) {

    });

传递给回调函数的index参数是所选元素的索引。

传递给回调函数的element参数是所选元素本身。

如果要设置每个选定的div元素的背景色，则可以这样做：

$(".contentDiv").each( function(index, element) {

    $(element).css("background-color", "#ffaaaa");
});

注意，我们需要如何在$()函数中包装element。这是因为element参数指向DOM元素，而不是JQuery附魔元素。通过将element包装在$()函数中，我们将获得一个包含所有JQuery函数的元素。

除了使用element参数之外，我们还可以使用this关键字。在所选元素的上下文中调用回调函数，这意味着" this"指向所选元素。这是一个例子：

$(".contentDiv").each( function(index) {

    $(this).css("background-color", "#ffaaaa");
});

注意，回调函数不再需要声明element参数，因为它不再使用它。

我们还可以更改div的内容，以使文本反映其索引。这是完成的方式：

$(".contentDiv").each( function(index, element) {

    $(element).text( $(element).text() + " " + index);
});

本示例获取元素的当前文本，在其后添加空格和索引，然后将其设置回该元素的文本。

first()

函数first()返回所选元素集中的第一个元素。这是一个例子：

$(".contentDiv").first().css("background-color", "#ffaaaa");

在本文开头提到的情况下，使用CSS类contentDiv的3个不同的div元素，现在仅第一个元素具有其背景色设置。

last()

函数last()返回所选元素集中的最后一个元素。这是一个例子：

$(".contentDiv").last().css("background-color", "#ffaaaa");

在本文开头提到的情况下，使用CSS类contentDiv的3个不同的div元素，现在仅最后一个元素设置了其背景色。

next()

next()函数返回选定元素之后的页面(DOM)中的下一个HTML元素。注意：它不是选择中的下一个元素，而是DOM树中的下一个元素。这是一个例子：

var firstDiv = $(".contentDiv").first()

firstDiv.next().css("background-color", "#ffaaaa");

此示例首先选择CSS类contentDiv的所有元素。然后，它请求该选择的第一个元素。最后，它在选定的第一个元素之后请求DOM树中的下一个元素，并设置其CSS属性" background-color"。

prev()

prev()函数返回页面(DOM)中先前的HTML元素，位于所选元素之前。注意：它不是所选内容中的前一个元素，而是DOM树中的前一个元素。这是一个例子：

var lastDiv = $(".contentDiv").last()

lastDiv.prev().css("background-color", "#ffaaaa");

本示例首先选择CSS类contentDiv的所有元素。然后，它请求该选择的最后一个元素。最后，它在选定的最后一个元素之前请求DOM树中的前一个元素，并设置其CSS属性" background-color"。

parent()

我们可以通过调用JQueryparent()函数来获取选定HTML元素的父元素。这是一个例子：

$("#theDiv").parent();

本示例首先选择具有id'theDiv'的元素。然后，它请求该元素成为父元素。

children()

children()函数返回给定HTML元素的所有子HTML元素。这是一个例子：

var children = $("#theDiv").children();

children.each(function() {

});

本示例选择ID为" theDiv"的元素，并请求其所有子元素。然后迭代所有这些孩子。这个例子实际上并没有对孩子做任何事情，但是我敢肯定，你明白了。

siblings()

siblings()函数返回给定HTML元素的所有同级。兄弟姐妹是与给定HTML元素在同一父级中的所有元素(自身除外)。这是一个例子：

var siblings = $("#theDiv").siblings();

siblings.each(function() {

});

此示例首先选择ID为" theDiv"的HTML元素。然后，它请求那些元素同级，并使用each()函数对其进行迭代。