Jquery Descendants

In jQuery, you can select descendants of an element using the find()  method or by using a space-separated selector.

  1. Using the find()  method: The find()  method selects all descendant elements that match the specified selector. It searches within the selected element and its children, grandchildren, and so on.
$(selector).find(descendantSelector);

Here, selector  is the initial element(s) you want to start the search from, and descendantSelector  is the selector for the descendants you want to select.

For example, if you have an HTML structure like this:

<div id="parent">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>

You can select the <li>  elements within the #parent  element using the find()  method like this:

$("#parent").find("li");
  1. Using a space-separated selector: You can also use a space-separated selector to directly select the descendants. This approach is similar to CSS selectors.
$(parentSelector descendantSelector);

Here, parentSelector  is the selector for the initial element(s), and descendantSelector  is the selector for the descendants you want to select.

For example, using the same HTML structure as above, you can select the <li>  elements within the #parent  element using the space-separated selector like this:

$("#parent li");

Both methods will select all  <li>  elements that are descendants of the #parent  element. You can replace  “li”  with any other selector to target different types of elements as descendants.

Note: jQuery is a popular JavaScript library, but its usage has been declining in recent years, with more developers using native JavaScript or modern frameworks like React or Vue.js.

Scroll to Top