Tree traversal

This page discusses - Tree traversal

Tree traversal

Tree traversal

     

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 :

<script>$("p").find("span").css('color',' blue');</script>

.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

<ul class="Brother-1">
<li class="child-i">I</li>
<li class="child-ii" style="position: relative;">II
<ul class="Brother-2">
<li class="child-a">A</li>
<li class="child-b">B
<ul class="Brother-3">
<li class="child-1">1</li>
<li class="child-2">2</li>
<li class="child-3">3</li>
</ul>
</li>
<li class="child-c">C</li>
</ul>
</li>
<li class="child-iii">III</li>
</ul>

 

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

<script>$("p").parent(".selected").css("background", "yellow");</script>

.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

<ul class="Brother-1">
<li class="child-i">I</li>
<li class="child-ii" style="position: relative;">II
<ul class="Brother-2">
<li class="child-a">A</li>
<li class="child-b">B
<ul class="Brother-3">
<li class="child-1">1</li>
<li class="child-2">2</li>
<li class="child-3">3</li>
</ul>
</li>
<li class="child-c">C</li>
</ul>
</li>
<li class="child-iii">III</li>
</ul>


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.