jQuery - Traversal Methods

In this tutorial we will learn about traversal methods used in jQuery.

jQuery provides us with some traversal methods to traverse the DOM and find elements in the page.

eq()

We use the eq() method to get the matched element at a given index.

Lets say, we have 5 paragraphs in our page.

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

So, to get the paragraphs we will use the paragraph tag.

$("p");

The above code will return an array like structure containing 5 paragraphs. Now, lets say we want to target the 3rd paragraph. So, to do that we will use the eq() method and pass 2 as argument.

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

Index is 0 based. So, the first element is at index 0. The second element is at index 1 and so on.

And to get the text of the 3rd paragraph we use the text() method.

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

first()

This method will return the first element from the matched elements.

Consider the 5 paragraphs and let's say we want to get the first matched paragraph element. So, we will write the following.

$("p").first();

$("p") will return an array like structure containing all the paragraph element and the first() method will give us the first matched element.

And to get the text of the first paragraph we use the text() method.

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

last()

This method will return the last element from the matched elements.

Lets say we have 5 paragraphs and we want to get the last paragraph.

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

So, to get the last paragraph we will write the following.

$("p").last();

And to get the text of the last paragraph we use the text() method.

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

find()

We use the find() method to get the descendent (children and grandchildren) of the matched element.

Lets say, we have an unordered list.

<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>

If we want to get all the descendents (children and grandchildren) li element of the ul element having id="fruits-1" then, we will write the following.

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

This will give us 6 li as there are total 6 li elements.

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

children()

We use the children() method to get the direct descendents of a given element.

Lets say, we have an unordered list.

<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>

If we want to get the children (descendents) we will write the following.

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

This will give us 4 li as there are total 4 li elements which are direct descendents.

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

parent()

This method will give use the parent of the element.

Lets say, we have an unordered list.

<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>

To know the parent of the ul element having id="fruits-2" we will use the parent method.

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

The above code will return the li element which is the parent of the given ul element having id="fruits-2".

siblings()

We use the siblings() property to find the siblings of a given element.

Lets say, we have an unordered list.

<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>

If we want to get the list of siblings of the li element having id="sample" we will write the following.

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

And if we console.log the above code we will get 3 li elements as siblings.

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

each()

We use the each() method to loop through a jQuery object and execute a function for each item.

Lets say, we have the following HTML.

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

So, we have five paragraph inside a div element having id="container". If we want to print the text of all the five paragraphs then we can use the each() method.

The each() method takes a callback function which is fired for each matched element.

Syntax:

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

In our case we want to loop through the paragraphs inside the div having id="container" so we will write the following.

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

The callback function takes 2 argument (index and elem). The value of the index is for the matched element and starts from 0. And elem holds the element.

To refer to the matched element from inside the function we use the $(this).

So, to print all the paragraphs text we will write the following code.

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

Output

<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