posted 6/25/2010 by Hajan Selmani
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:
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
Alal da ti e (ex) cimeru !! Rasturaj
Regards i od mene :)
very useful
What kind of email newsletter would you prefer to receive from CodeAsp.Net?18
