• Jquery for Beginners – Traversing through DOM

    Posted on July 11, 2012 by in Jquery, Other Programming

    If you are new to Jquery please go through Introduction to JQuery and Jquery Selectors. This article explains how to use Jquery by traversing through DOM. To understand things better let us create a multi level menu using the HTML below

    <div id="#menu">
    	<ul class="level-1">  
    		<li class="item-1">Top Level - Menu I</li>  
    		<li class="item-2">Top Level - Menu II  
    			<ul class="level-2">  
    				<li class="item-a">Sub Level - Menu A</li>  
    				<li class="item-b">Sub Level - Menu B  
    					<ul class="level-3">  
    						<li class="item-I"><span>Sub Level2 - Menu 1</span></li>  
    						<li class="item-II sublevel selected"><span>Sub Level2 - Menu 2</span></li>  
    						<li class="item-III sublevel"><span>Sub Level2 - Menu 3</span></li>  
    					</ul>  
    				</li>  
    				<li class="item-c">Sub Level - Menu C</li>  
    			</ul>  
    		</li>  
    		<li class="item-3">Top Level - Menu III</li>  
    	</ul> ​    
    </div>    
    

    Here is output of the menu

    Jquery Traversing

    Now that we have the menu DOM ready, let use the the power of jquery to traverse through the elements.

    Children

    The children function gets the immediate children of a DOM element. Children accepts selector as a parameter optionally.

    $(document).ready(function() {
        $('#menu ul.level-3').children('li').css("background", "#B3E8E5");
    });
    

    Jquery Traversing -- Children

    find

    Find works similar to children with the exception that find also selects grand children i.e children at multiple levels.

    $(document).ready(function() {
        $('#menu ul.level-2').find('li').css("background", "#B3E8E5");
    });
    

    For example, if children is used in the above it selects only the li at level 2 not at level 3, find selects li both at level 2 and level 3.

    Jquery Traversing -- find

    parent and parents

    The .parent() method allows us to search through the parents of these elements in the DOM tree and construct a new jQuery object from the matching elements. The .parents() and .parent() methods are similar, except that the latter only travels a single level up the DOM tree.

    $(document).ready(function() {
        $('#menu ul.level-2').parent('li').css("background", "#B3E8E5");
    });
    

    siblings

    The .siblings() method allows us to select the siblings (brothers and sisters) of these elements in the DOM tree

       $('#menu li.sublevel').siblings().css("background", "#B3E8E5");
    

    next & prev

    The .next() method allows us to select the next sibling (just one) and .nextall() selects all the next siblings, .prev() and .prevall() works similar to next and nextall but selects the previous siblings.

    Jquery Traversing -- next

    Be Sociable, Share!
      Post Tagged with , ,

    Written by

    Vanamali Juvvadi is a Web enthusiast and loves all things design and technology. Founded qnownow with a group of friends to share anything/everything they know/find on the internet.

    View all articles by

    Email : [email protected]

    Leave a Reply