jQuery Traversal

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

Jakob Jenkov
Last update: 2014-09-27

Once you have selected some HTML elements with JQuery that you want to modify, you need to traverse those elements, so you can make the desired modifications to each element. In this text I will dive into some of the most commonly used traversal functions in JQuery. For a full list of traversal functions, and their many advanced options, go to:

JQuery Traversing

Here are some of the commonly used JQuery traversal functions:

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

First, imagine you have the following div's in your page:

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

Imagine too, that you want to selected these div elements, and iterate through them in order to modify them in some way. Here is how you select them, by their CSS class:

$(".contentDiv");

Now you need to traverse the selected HTML elements. The rest of this text will show you various functions to do this.

each()

The each() function lets you traverse each selected element. You pass a callback function to each() which is called for each selected element. Here is how that looks:

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

    });

The index parameter passed to the callback function is the index of the selected element.

The element parameter passed to the callback function is the selected element itself.

If you wanted to set the background color of each of the selected div elements, you could do it like this:

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

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

Notice how you need to wrap the element in the $() function. This is because the element parameter points to a DOM element, not a JQuery enchanced element. By wrapping the element in the $() function, you get an element back which has all the JQuery functions on it.

Instead of using the element parameter, you could also use the this keyword. The callback function is called in the context of the selected element, meaning this points to the selected element. Here is an example:

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

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

Notice how the callback function no longer needs to declare the element parameter, because it no longer uses it.

You could also change the contents of the div's, so that the text reflected their index. Here is how that is done:

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

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

This example grabs the current text of the element, appends a space and the index to it, and sets it back as the text of the element.

first()

The first() function returns the first element in the selected set of elements. Here is an example:

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

In the case mentioned in the beginning of this text, with 3 different div elements with the CSS class contentDiv, only the first element now has its background color set.

last()

The last() function returns the last element in the selected set of elements. Here is an example:

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

In the case mentioned in the beginning of this text, with 3 different div elements with the CSS class contentDiv, only the last element now has its background color set.

next()

The next() function returns the next HTML element in the page (DOM), after the selected element. Note: it is not the next element in the selection, but the next element in the DOM tree. Here is an example:

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

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

This example first selects all elements with the CSS class contentDiv. Then it requests the first element of that selection. Finally it requests the next element in the DOM tree after the first of the selected, and sets its CSS property background-color.

prev()

The prev() function returns the previous HTML element in the page (DOM), before the selected element. Note: it is not the previous element in the selection, but the previous element in the DOM tree. Here is an example:

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

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

This example first selects all elements with the CSS class contentDiv. Then it requests the last element of that selection. Finally it requests the previous element in the DOM tree before the last of the selected, and sets its CSS property background-color.

parent()

You can obtain the parent element of a selected HTML element by calling the JQuery parent() function. Here is an example:

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

This example first selects the element with the id theDiv. Then it requests that elements parent.

children()

The children() function returns all child HTML elements of a given HTML element. Here is an example:

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

children.each(function() {

});

This example selects the element with the id theDiv, and requests all its children. Then it iterates all these children. The example doesn't actually do anything with the children, but I'm sure you get the picture.

siblings()

The siblings() function returns all siblings of a given HTML elements. Siblings are all elements (except itself) inside the same parent as the given HTML element. Here is an example:

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

siblings.each(function() {

});

This example first selects the HTML element with the id theDiv. Then it requests that elements siblings, and iterate them using the each() function.

Next: jQuery & CSS

Tweet
	Jakob Jenkov