jQuery遍历

时间:2020-01-09 10:47:15  来源:igfitidea点击:

一旦选择了要修改的带有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()函数对其进行迭代。