Prev Next

jQuery Descendants

jQuery provides methods to traverse down the DOM tree and select descendants of a particular element. Common methods include children() and find(). These methods are useful for manipulating child or descendant elements dynamically.

Key Topics

Using children()

The children() method retrieves all direct child elements of the selected element.

$("#parent").children();

Explanation: This code retrieves all direct child elements of the element with the ID parent.

Using find()

The find() method retrieves all descendant elements of the selected element, filtered by a specific selector.

$("#container").find(".target");

Explanation: This code retrieves all descendants of the element with the ID container that have the class target.

Example: Descendant Traversal


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Descendants Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="container">
        <div id="parent">
            <p class="target">Child 1</p>
            <p>Child 2</p>
        </div>
        <p class="target">Another Descendant</p>
    </div>
    <button id="childrenButton">Get Children</button>
    <button id="findButton">Find Descendants</button>

    <script>
        $(document).ready(function() {
            $("#childrenButton").click(function() {
                let children = $("#parent").children().map(function() {
                    return $(this).text();
                }).get();
                alert("Children: " + children.join(", "));
            });

            $("#findButton").click(function() {
                let descendants = $("#container").find(".target").map(function() {
                    return $(this).text();
                }).get();
                alert("Descendants with 'target' class: " + descendants.join(", "));
            });
        });
    </script>
</body>
</html>

Explanation: This example demonstrates how to retrieve direct children and filtered descendants using buttons.

Key Takeaways

  • Direct Traversal: Use children() for retrieving only direct child elements.
  • Filtered Descendants: Use find() to retrieve specific descendant elements matching a selector.
  • Dynamic Interaction: Combine descendant methods with event handlers for interactive applications.
Prev Next