jQuery Introduction | Element Traversal | Searching Descendant Elements .children() .find()

Searching Descendant Elements

The following methods are used to search descendant elements of a specific element in the DOM tree.

.children() Method

The .children() method selects all child elements of the selected element. You can also pass a selector as an argument to select only child elements that match that selector.

When you have HTML elements as follows:

<div>div (grandparent)
  <ul>ul (parent)
    <li>li (child)
        <span>span (grandchild)</span>
    </li>
  </ul>
</div>

Select all child elements of the <ul> element and change their CSS style.

$("ul").children().css({"border": "2px solid red"});

Run code

.find() Method

The .find() method selects all descendant elements of the selected element that match the selector passed as an argument. You can also pass an asterisk ("*") as an argument to select all descendant elements of the selected element.

Select all descendant elements of the <ul> element and change their CSS style.

$("ul").find("*").css({"border": "2px solid red"});

Run code