Skip to main content

Traversing Down (descendants)

jQuery, a fast and concise JavaScript library, simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. In this tutorial, we will delve into "Traversing Down (descendants)" – a very important aspect of jQuery.

What is Traversing Down (descendants)?

In jQuery, traversing down means moving through the descendants of a selected element. A descendant can be a child, grandchild, great-grandchild, and so on. jQuery provides several methods for traversing down the DOM tree to find descendants of an element.

Methods for Traversing Down

Let’s learn about the methods provided by jQuery for traversing down the descendants of a selected element.

.children()​

The .children() method gets the children of each element in the set of matched elements, optionally filtered by a selector.

$( "ul" ).children(); // Selects all children of every unordered list
$( "ul" ).children( ".selected" ); // Selects only children with the class 'selected'

.find()​

The .find() method gets the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

$( "ul" ).find( "li" ); // Selects all list items that are descendants of an unordered list

.next()​

The .next() method gets the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.

$( "li" ).next(); // Selects the next sibling of each list item
$( "li" ).next( ".selected" ); // Selects the next sibling only if it has the class 'selected'

.siblings()​

The .siblings() method gets the siblings of each element in the set of matched elements, optionally filtered by a selector.

$( "li" ).siblings(); // Selects all siblings of each list item
$( "li" ).siblings( ".selected" ); // Selects only siblings with the class 'selected'

Conclusion

Understanding how to traverse down through your HTML elements using jQuery is an important skill that can greatly simplify your JavaScript code. By using the .children(), .find(), .next(), and .siblings() methods, you can easily navigate through your HTML document and manipulate elements in a variety of ways.

Remember, practice makes perfect. So, try out these methods in your own code to get a hang of jQuery Traversing Down.

Happy coding!