jQuery Traversal

Last Updated Jul 21, 2015, 12:00:06 PM

What is jQuery Traversal

jQuery Traversing is used to select HTML elements based on given conditions. jQuery comes with built in traversal methods to select different elements in the page. The elements on the web page can be selected both randomly and sequentially.

jQuery has different jquery traversal methods we can use. Let's look at each of them

jQuery .add() Method

jQuery add( method adds elements to an existing group of elements.

Syntax .add( selector )

Let us look at an example on how we can use the jquery traversal .add() method

Example

Below example program will find all div elements and make a border and then it will ad all paragraphs to the jQuery object to set their backgrounds in green color.

Example

HTML

See the above HTML code. We have 6 div elements and one paragraph. Using the below jQuery add() method we can simply target the those div elements and style those div elements with red color border ( "border", "2px solid red" ) and also set the background to green.

jQuery

When you run the above jQuery add() method example, it will produce the following output

Output

Try It Now

jQuery addBack() Method

jQuery addBack() traversal method adds the previous set of elements on the stack to the current set, optionally filtered by a selector.

jQuery .addBack() method adds previous DOM element to the current set and maintains them in the internal stack which will take care of changes to the matched set of elements.

A Set of new elements will be pushed onto the stack when DOM traversal method being called. The advantage withjQuery .addBack() method is to get access on the previous set of elements.

Syntax

The below example explains how to use jQuery.addBack() method and also we will understand the difference before using jQuery addBack() method and after using jQuery addBack() method

Example

Try It Now

jQuery .children () Method

jQuery children() method is used to get the children of each and every element in the set of matched elements and constructs a new jQuery object from the matched elements in the DOM tree.

In jQuery, the children() method is different from jQuery find() method method. meaning .children() method only travels a single level down the DOM tree where as .find() can traverse down multiple levels to select elements.

It accepts optional parameter i.e., selector expression of the same type.

Syntax

Let's look at an example of using the jQuery children() traversal method.

If you notice the above HTML It has child elements and parent elements as well. Using the below jquery children method we target the direct children of ul $(document).ready(function(){ $("ul").children().css({"color": "blue", "border": "4px solid blue"}); });
Output

The above example produces the following result.

Try It Now

jQuery closest() method

jQuery closest() method returns the first ancestors of the selected element that matched the selector in the DOM tree. It is able to find out the elements and their ancestors in the DOM tree and constructs a new jQuery object from the matched elements.

In jQuery, parents() and closest() are similar in action both of them traverse the DOM tree.

Syntax
Example

Look at the above HTML code. The ul contains 4 list elements or ancestors. Using the jquery closest() method we can target the closest elements in each li and change its behavior

Try It Now

jQuery each() method

jQuery each() method is an iterator function for looping over the jQuery object and executes a function for each matched element. The looping will start from 0

The jQuery each() method iterates over all DOM elements. Each method is less error-prone. jQuery each method starts the iteration from the beginning .i.e from 0.

Syntax
Example

The above jquery each method will iterate over the each div in the HTML and change its color when the element gets clicked

Output

The above example code produces the following result

Try It Now

jQuery eq() Method

jQuery eq() method selects a HTML element with a specific index number.

As we know that index starts from 0 not from 1.jQuery eq() method also start it’s index from 0 to select an element. Here index represents that position of the element in the group.

The following example has five div HTML elements in which we can see selecting the particular element by calling eq( 2 ) method by passing the position of that element.

Example

Notice that the indexes start with 0, so the third element would be the second one

Output

Try It Now

jQuery find() Method

jQuery find() method simply constructs a jQuery object which is capable of holding the descendants of each element of selected element in the DOM tree.

Note: To get all of the descendant elements from the DOM tree, Try to use the "*" universal selector. Please note that a child nodes can be a child, grandchild, a great-grandchild and so on.

Syntax
Example

The below example will find the title of each text and applies some css style to it to manipulate the text.

Try It Now

jQuery prev() method

jQuery prev() method constructs a jQuery object which will get the immediate sibling element of the selected element in DOM tree. Siblings are the elements which same parent element.

Syntax

In the syntax, the selector is an optional parameter to pass and specify a selector expression to narrow down the previous sibling search.

Let us look at the following example to understand about the .prev() jQuery method

Example

The above example will move its current style to its immediate sibling that is called its jQuery prev element

Output

Try It Now