jQuery Traversing Descendants

A descendant is a child, grandchild, great-grandchild, and so on in logical connections. jQuery includes handy methods like as children() and find() for traversing down in the DOM tree at single or several levels to easily locate or obtain the child or other descendants of an element in the hierarchy.

jQuery children() Method

To access the direct children of the specified element, use the jQuery children() function. The following example uses the class to highlight the immediate children of the <ul> element, which is <li>. highlight on document ready.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <style>
        .box * {
            display: block;
            border: 2px solid #f2f3f5;
            color: #212b36;
            padding: 5px;
            margin: 15px;
        }
    </style>
</head>
<body>

<h1>Select the Child Elements</h1>
<div class="box" style="width:300px;">
    <ul>ul
        <li>li
            <span>span</span>
        </li>
    </ul>
</div>

<script>
    $(document).ready(function(){
        $("div").children().css({"color": "#00ab55", "border": "2px solid #00ab55"});
    });
</script>
</body>
</html>

Preview

jQuery find() Method

The descendent elements of the chosen element are obtained using the jQuery find() function. The find() and children() methods are similar in that they both search across numerous layers of the DOM tree to identify the latest descendant, but the children() function only searches a single level. The example below will place a border around all the <li> elements that are descendants of the <div> element.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <style>
        .box * {
            display: block;
            border: 2px solid #f2f3f5;
            color: #212b36;
            padding: 5px;
            margin: 15px;
        }
    </style>
</head>
<body>

<h1>Select the Find Elements</h1>
<div class="box" style="width:300px;">
    <ul>ul
        <li>li
            <span>span</span>
        </li>
    </ul>
</div>

<script>
    $(document).ready(function(){
        $("div").find("span").css({"color": "#ff4842", "border": "2px solid #ff4842"});
    });
</script>
</body>
</html>

Preview

If you wish to access all the descendant elements, though, you may use the universal selector.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <style>
        .box * {
            display: block;
            border: 2px solid #f2f3f5;
            color: #212b36;
            padding: 5px;
            margin: 15px;
        }
    </style>
</head>
<body>

<h1>Select All the Descendant Elements</h1>
<div class="box" style="width:300px;">
    <ul>ul
        <li>li
            <span>span</span>
        </li>
    </ul>
</div>

<script>
    $(document).ready(function(){
        $("div").find("*").css({"color": "#ffc107", "border": "2px solid #ffc107"});
    });
</script>
</body>
</html>

Preview

jQuery Ancestors

jQuery Siblings

jQuery Traversing Descendants

jQuery children() Method

Example

jQuery find() Method

Example

Example

Links

Tutorials

Connect with us