jQuery – Find Descendants of an element

A Descendant is a child, grandchild, and great grand-parent of an element. Let us see the figure again:

jQuery Traversing

In the above figure, the Descendent is <div>. The following are the key points about Ancestors from the above example:

  • The <ul> and <ol> is the child of <div>
  • The <span> element is the┬ádescendent of <div>
  • The <li> is the child of the <ul> element
  • The <li> is the child of the <ol> element
  • The <strong> element is the┬ádescendent of <div>

Descendants suggest traversing down in the DOM tree and the following are the supported methods in jQuery:

  • children()
  • find()

Let us learn about each method one by one:

The children() method in jQuery

If you want to return the children of the selected element, use the jQuery children() method. Since it returns the direct children, therefore it traverses down. Let us see an example wherein we will return the children of the element <ul>:

Output

jQuery children() method

The find() method in jQuery

To return the descendant elements of the selected element, use the jQuery find() method. Let us see an example to return all <li> elements that are descendants of <div>:

Output

jQuery find() method

jQuery - Find Ancestors of an element
jQuery - Find Siblings of an element
Studyopedia Editorial Staff
Studyopedia Editorial Staff
[email protected]

We work to create programming tutorials for all.

No Comments

Post A Comment