jQuery Traversing - Descendants

You may use jQuery to locate descendants of an element by traversing down the DOM tree.

A descendant is defined as a child, grandchild, great-grandchild, and so on.

You can also search for these topics, jquery traversing descendants with class, working of selector jquery traversing descendant, example for jquery selector traversing descendant filter, multiple element.

Traversing Down the DOM Tree

Two helpful ways to traversing the DOM tree are jQuery:

  • children()
  • find()
You can also search for these topics, multiple element, background element to work, types of Traversing Down the DOM Tree.

jQuery children() Method

All immediate children of the chosen element are returning with the children() approach.

Only single level of the DOM tree is traversed by this technique.

Example:- The example below retrieves all elements which are direct children of each div element with class="div1".

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#b1").click(function () {
            $(".div1").children().css({ "color": "red", "border": "2px solid blue" });
        });
    });
</script>
</head>
<body>

<div class="div1">div (current element)<br /> <br />
  <p>p (child 1)
    <span>span (grandchild 1)</span>   
  </p>
  <p>p (child 2)
    <span>span (grandchild 2)</span>
  </p> 
  <div>div (child 3)</div>
</div><br />

<button id="b1">Show Child of DIV 1</button>

</body>
</html>

Output :-

div (current element)

p (child 1) span (grandchild 1)

p (child 2) span (grandchild 2)

div (child 3)


You can also search for these topics, jquery call child function from parent, jquery how to get child method, multiple conditions work upon jquery children() method, differenciate the child method vs find using jquery, call the children, parent selector, prevent the click event, type of the children() method, return the children() method, example.

jQuery find() Method

The find() method is used to find any child or descendant element anywhere from the choosen element.

The descendant elements of the chosen element are returned by the find() function, all the way down to the final descendant.

Example :- 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#b3").click(function () {
            $(".div3").find("span").css({ "color": "red", "border": "2px solid blue" });
        });
    });
</script>
</head>
<body>

<div class="div3">div (current element)<br /> <br />
  <p>p (child 1)
    <span>span (grandchild 1)</span>   
  </p>
  <p>p (child 2)
    <span>span (grandchild 2)</span>
  </p> 
  <div>div (child 3)</div>
</div><br />

<button id="b3">Find ALL Child SPAN Element </button>

</body>
</html>

Output :-

div (current element)

p (child 1) span (grandchild 1)

p (child 2) span (grandchild 2)

div (child 3)


You can also search for these topics, how to use jquery find method by id, multiple selectors works in jquery find method, jquery find method by class, return type works on jquery find method, find attribute, multiple elements, parent and child method, find get method data and value using jquery ajax, example for jquery find() method.