Home Ajax Jquery Tree traversal
Questions:Ask|Latest


 
 

Share on Google+Share on Google+

Tree traversal

Advertisement
This page discusses - 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()

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 :

<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." :

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

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

.parent( )

This method get the direct parent of an element.

Example :

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

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

.parents( )

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

Example :

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

.parentsUntil()

 

Example :

Consider the following code:

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

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>

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

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

.prevUntil( )

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

Example:

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

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.

Example :

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

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

Learn from experts! Attend jQuery Training classes.

Advertisements

Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: April 18, 2011

Ask Questions?    Discuss: Tree traversal  

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments
DMCA.com