在本教程中，我们将学习jQuery中使用的遍历方法。

jQuery为我们提供了一些遍历方法来遍历DOM和查找页面中的元素。

eq()

我们使用eq()方法来获取给定索引处的匹配元素。

可以说，我们的页面中有5个段落。

<p>Hello World</p>
<p>Happy</p>
<p>Hey</p>
<p>hi</p>
<p>Hurray!</p>

因此，要获取段落，我们将使用段落标记。

$("p");

上面的代码将返回一个数组，其中包含5个段落的结构。
现在，假设我们要定位第三段。
因此，要做到这一点，我们将使用eq()方法并将2作为参数传递。

$("p").eq(2);	//this will get us the 3rd paragraph

索引从0开始。
因此，第一个元素在索引0处。
第二个元素在索引1处，依此类推。

为了获得第三段的文字，我们使用了text()方法。

console.log( $("p").eq(2).text() );	//this will print Hey

first()

此方法将从匹配的元素中返回第一个元素。

考虑5个段落，假设我们要获取第一个匹配的段落元素。
因此，我们将编写以下内容。

$("p").first();

$(" p")将返回一个类似数组的结构，其中包含所有段落元素，而first()方法将给我们第一个匹配的元素。

为了获得第一段的文字，我们使用了text()方法。

console.log( $("p").first().text() );	//this will print Hello World

last()

此方法将从匹配的元素中返回最后一个元素。

假设我们有5个段落，而我们想得到最后一个段落。

<p>Hello World</p>
<p>Happy</p>
<p>Hey</p>
<p>hi</p>
<p>Hurray!</p>

因此，要获得最后一段，我们将编写以下内容。

$("p").last();

为了获得最后一段的文本，我们使用了text()方法。

console.log( $("p").last().text() );	//this will print Hurray!

find()

我们使用find()方法来获取匹配元素的后代(子代和孙代)。

可以说，我们有一个无序列表。

<ul id="fruits-1">
<li>Apple</li>
<li>Mango</li>
<li>Orange</li>
<li>Fruits-2 list:
  <ul id="fruits-2">
    <li>Banana</li>
    <li> Pomegranate</li>
  </ul>
</li>
</ul>

如果我们想获得具有id = fruits-1的ul元素的所有后代(子代和孙子)li元素，我们将编写以下内容。

$("ul#fruits-1").find("li");

这将给我们6 li，因为总共有6 li元素。

console.log( $("ul#fruits-1").find("li").length );	//this will print 6

children()

我们使用children()方法来获取给定元素的直接后代。

可以说，我们有一个无序列表。

<ul id="fruits-1">
<li>Apple</li>
<li>Mango</li>
<li>Orange</li>
<li>Fruits-2 list:
  <ul id="fruits-2">
    <li>Banana</li>
    <li> Pomegranate</li>
  </ul>
</li>
</ul>

如果我们想让孩子们(后裔)，我们将写以下内容。

$("ul#fruits-1").children("li");

这将给我们4 li，因为总共有4 li元素是直接后代。

console.log( $("ul#fruits-1").children("li").length );	//this will print 4

parent()

此方法将使用元素的父级。

可以说，我们有一个无序列表。

<ul id="fruits-1">
<li>Apple</li>
<li>Mango</li>
<li>Orange</li>
<li>Fruits-2 list:
  <ul id="fruits-2">
    <li>Banana</li>
    <li> Pomegranate</li>
  </ul>
</li>
</ul>

要知道具有id =" fruits-2"的ul元素的父级，我们将使用parent方法。

$("ul#fruits-2").parent();

上面的代码将返回li元素，该元素是具有id =" fruits-2"的给定ul元素的父级。

siblings()

我们使用siblings()属性来查找给定元素的兄弟姐妹。

可以说，我们有一个无序列表。

<ul id="fruits-1">
<li>Apple</li>
<li id="sample">Mango</li>
<li>Orange</li>
<li>Fruits-2 list:
  <ul id="fruits-2">
    <li>Banana</li>
    <li> Pomegranate</li>
  </ul>
</li>
</ul>

如果要获取具有id =" sample"的li元素的同级列表，我们将编写以下内容。

$("li#sample").siblings();

如果我们在console.log上面的代码中，我们将获得3个li元素作为同级元素。

console.log( $("li#sample").siblings() );

each()

我们使用each方法来遍历一个jQuery对象并为每个项目执行一个函数。

可以说，我们有以下HTML。

<div id="container">
	<p>Super</p>
	<p>Sassy</p>
	<p>Smart</p>
	<p>Smiley</p>
	<p>Sweet</p>
</div>

因此，我们在div元素中有五个段落，其中包含'id =" container"。
如果要打印所有五个段落的文本，则可以使用each()方法。

each()方法采用一个回调函数，该函数针对每个匹配的元素触发。

语法：

$(/* selector/element */).each( function ( index, elem ) {
	//some code goes here...
});

在我们的例子中，我们想遍历div内具有id =" container"的段落，因此我们将编写以下内容。

$("div#container p").each( function ( index, elem ) {
	//some code here...
});

回调函数带有2个参数(索引和elem)。
" index"的值用于匹配的元素，从0开始。
" elem"保存该元素。

为了从函数内部引用匹配的元素，我们使用$(this)。

因此，要打印所有段落文本，我们将编写以下代码。

$("div#container p").each(function( index, elem ) {
	console.log( elem );
	console.log( "Index: " + index + " Text: " + $(this).text() );
});

<p>Super</p>
Index: 0 Text: Super
<p>Sassy</p>
Index: 1 Text: Sassy
<p>Smart</p>
Index: 2 Text: Smart
<p>Smiley</p>
Index: 3 Text: Smiley
<p>Sweet</p>
Index: 4 Text: Sweet