Loading ...

JQuery path traversal using Parents(), Parent() and Closest() | CodeAsp.Net

JQuery path traversal using Parents(), Parent() and Closest()

 /5
0 (0votes)

JQuery has very useful library of functions regarding DOM's tree traversal.

This morning I was playing around with parents(), parent() and closest() functions and I wanted to share the code in here.

Brief description of the functions:

  • parents() - this function will return all the ancestors in each element of the current set of matched elements. Moreover, you can use selector * parent('selector') * - to filter more by the given selector.
  • parent() - this function is similar to the parents(), the difference is that it will get the parent of set of matched elements. Same as parents(), more filtering can be achieved by using selector.
  • closest() - one interesting function that will get the first ancestor of the matched elemens progressing up tru the DOM tree by starting from the matched elements.

Here is the HTML code I was using to test the functions:

 

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//find parents
$('#Parents').click(function(){
$('li.level3_2').parents().css('color','green');
});

//find parent
$('#Parent').click(function(){
$('li.level3_2').parent().css('color','red');
});

//find closest
$('#Closest').click(function(){
$('li.level3_2').closest('ul').css('background-color','pink');
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ol class="level1_0">
<li class="level1_1">list 1</li>
<li class="level1_2">list 2
<ul class="level2_0">
<li class="level2_1">Sub-list1</li>
<li class="level2_2">Sub-list2
<ol class="level3_0">
<li class="level3_1">Sub-sub-list1</li>
<li class="level3_2">Sub-sub-list2 (this is the start point list element for our traversal)</li>
<li class="level3_3">Sub-sub-list3</li>
<li class="level3_4">Sub-sub-list4</li>
</ol>
</li>
<li class="level2_3">Sub-list3
<ul class="level3_01">
<li class="level3_02">Sub-sub-list01</li>
<li class="level3_03">Sub-sub-list02</li>
<li class="level3_04">Sub-sub-list03</li>
</ul>
</li>
</ul>
</li>
<li class="level1_3">list 3</li>
<li class="level1_4">list 4</li>
</ol>
</div>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div id="message">

</div>
<div>
<br /><br />
<a href="#" id="Parents">Parents()</a><br />
<a href="#" id="Parent">Parent()</a><br />
<a href="#" id="Closest">Closest('ul') - will find the closest 'ul' element</a><br />
</div>
</form>
</body>
</html>


Brief explanation of the code:

I have created lists tree.

The list elements which Im using to start the traversal from, have classes which are used in the JQuery functions i.e. $('#className').

There are three <a /> tags 'Parents()', 'Parent()', and 'Closest('ul')'. - Which once you click them, you will see the appropriate functions behaviour by changing the HTML formatting style of the lists.

Mainly, these functions are very useful when trying to parse HTML code and traversing through it's DOM. There are lot of other functions like find(), next(), children(), prev() etc, which I will cover in one of my next blog posts (if someone else would not).

Hope this was helpful and informative.

Regards,
Hajan

Comments (2)

   
Shenol
Shenol
Alal da ti e (ex) cimeru !! RasturajRegards i od mene
6/26/2010
 · 
by
   
vivek_iit
very useful
6/29/2010
 · 
by
  • :*
  • :*
  • :
 *

Top Posts