Tree traversal

Tree traversal have following method :

.children()

This method get a set of elements containing all of the unique immediate children of each of the matched set of elements.

Example :

$("div").children(".selected").css("color", "blue");

It finds all children with a class "selected" of each div.

.closest( )

This method get a set of elements containing the closest parent element that matches the specified selector, the starting element included.

Example :

$('li.item-a').closest('ul').css('background-color', 'red');

This will change the background color of the closest "ul" .

.find( )

This method searches for descendent elements that match the specified selectors.

Example :

.next()

This method get a set of elements containing the unique next siblings of each of the given set of elements.

Example :

$("p").next(".selected").css("background", "yellow");

It finds the very next sibling of each paragraph. Keep only the ones with a class "selected".

.nextAll()

This method is used to find all sibling elements after the current element.

Example :

$('li.third-item').nextAll().css('background-color', 'red');

.nextUntil()

It finds all sibling elements after the current element.

Example : Consider the following code :

<dl>
  <dt>term 1</dt>
  <dd>definition 1-a</dd>
  <dd>definition 1-b</dd>
  <dd>definition 1-c</dd>
  <dd>definition 1-d</dd>

  <dt id="term-2">term 2</dt>
  <dd>definition 2-a</dd>
  <dd>definition 2-b</dd>
  <dd>definition 2-c</dd>

  <dt>term 3</dt>
  <dd>definition 3-a</dd>
  <dd>definition 3-b</dd>
</dl>

Below Script can find the elements which come after second term until a following <dt>.

$('#term-2').nextUntil('dt').css('background-color', 'red');

.offsetParent() 0

This method get the closest ancestor element that is positioned. The .offsetParent() method allows us to search through the ancestors of these elements in the DOM tree and construct a new jQuery object wrapped around the closest positioned ancestor.

Example :

Consider the following code : 1

The below script finds the offsetParent of item "A." : 2

<script>$('li.item-a').offsetParent().css('background-color', 'red');</script>

This will change the color of list item II, which is positioned.

.parent( ) 3

This method get the direct parent of an element.

Example :

It will find the parent element of each paragraph with a class "selected". 4

.parents( )

This method gets the ancestors of each element in the current set of matched elements. 5

Example :

$('li.child-a').parents().css('background-color', 'red') ;

.parentsUntil() 6

Example :

Consider the following code: 7

The script below change the red background for the level-2 list and the item II.

$('li.item-a').parentsUntil('.level-1').css('background-color', 'red');

.prev( ) 8

This method will get the immediately preceding sibling of each element in the set of matched elements.

Example :

$('li.third-item').prev().css('background-color', 'red');

.prevAll()

This method will get all preceding sibling of each element in the set of matched elements.

Example :

Consider the following code :

<ul>
<li>Node 1</li>
<li>Node 2</li>
<li class="third-node">Node 3</li>
<li>Node 4</li>
<li>Node 5</li>
</ul> 9

The following script changes red background behind Node 1 and Node 2.

$('li.third-item').prevAll().css('background-color', 'red');

.prevUntil( ) 0

This method gets all preceding siblings of each element up to the provided 'selector'.

Example:

('#term-2').prevUntil('dt').css('background-color', 'red'); 1

This will get all the elements before "term-2" until it would not get "dt" .

.siblings( )

This method gets the siblings of each element in the set of matched elements. 2

Example :

$("p").siblings(".selected").css("background", "yellow");

It finds all siblings with a class "selected" of each 'p'. 3

Learn from experts! Attend jQuery Training classes.

Tree traversal

Tree traversal

Tree traversal

Tree traversal

Tutorials