JQuery Descendant Traversing

Last article explained the process of retrieving parent elements of particular html element via JQuery Ancestor functions. This article explains the reverse process i.e. selecting child elements of a particular html element via JQuery Descendant functions. There are two major descendant functions in JQuery: children() and find() functions.

The children() function

The children() function selects all the child that are direct descendants of the elements. It goes down only one level for element selection and do not select grand-children of the element. Take a look at the following example.

<!DOCTYPE html>
<html>
<head>
    
    <title>JQuery Children</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    
    <script type = "text/javascript">
         $(document).ready(function() {
         $("div").children().css({"border": "1px solid green"});
  
         });
      </script>
    
</head>
    
<body>
    
    <div>
        <ul>
            <li>Apple</li>
            <li>Banana</li>
            <li>Orange</li>
            <li>Guava</li>
            <li><h1>Peach </h1></li>
        
        </ul>
        <div>
        
            <p>This is the grand child of the outer div.</p>
            
        </div>
    </div>
    
    
    
</body>

</html>

Download Code Run Code

The above webpage contains a div which further contains a ul element and div element. The child ul element in return contains li elements. Similarly the child div contains another div element which further contains a paragraph. JQuery factory method select the div element and then set the border of all of its immediate children to 1px solid green. This will create a border around ul, the child div and the paragraph.You will notice that the border will not be added to li elements because there are not direct descendants of any div element.

The find() function

The find() function finds all the descendant elements specified in the parameter. For instance calling find(“li”) on div element will find all the li elements at all the way down to the last child in the hierarchy. Find(“*”) finds all the child records of the element. Have a look at the following example.

<!DOCTYPE html>
<html>
<head>
    
    <title>JQuery Find</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    
    <script type = "text/javascript">
         $(document).ready(function() {
         $("div").find("li").css({"border": "1px solid green"});
  
         });
      </script>
    
</head>
    
<body>
    
    <div>
        <ul>
            <li>Apple</li>
            <li>Banana</li>
            <li>Orange</li>
            <li>Guava</li>
            <li><h1>Peach </h1></li>
        
        </ul>
    
        
            <p>This is the grand child of the outer div.
            <ul>
                <li>Ford</li>
                <li>Honda</li>
                <li>Mustang</li>
                <li>Toyota</li>
            
            </ul>
            </p>
       
    </div>
    
    
    
</body>

</html>

Download Code Run Code

The above JQuery script will add a border around all the li elements that are any-level children of a div element.

<<< JQuery Ancestor TraversingJQuery Sibling Functions >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .