HTML CSS JAVASCRIPT JQUERY LIQUID

jQuery Traversing - Descendants

❮ Previous Next ❯

You can use jQuery to explore inside the HTML structure and locate elements that are inside another element.

A descendant is someone's child, grandchild, great-grandchild, and so forth.

Traversing Down the DOM Tree

Here are two helpful jQuery techniques for navigating through the tree-like structure of a webpage:

  • children()
  • find()

jQuery children() Method

The children() function gives you all the immediate children of the element you've chosen.

This approach only goes one level deeper into the web page's structure.

This example finds all the elements that are directly inside each <div> element:

You have the choice to use an extra option to narrow down the search for children.

This example finds and displays all paragraphs (<p>) within a specific <div> element that has the class name "first." It only looks at the paragraphs directly inside that <div>.

jQuery find() Method

The find() function gives you all the elements inside the chosen element, including its deepest descendants.

In this example, we find and display all <span> elements inside a <div>.

This example retrieves all elements inside a <div> element:
❮ Previous Next ❯