Learn jQuery: Traversing the DOM
jQuery children
The jQuery .children() method returns all child elements of a selected parent element.
This method only applies to the direct children of the parent element, and not deeper descendents.
In the example code, $('.parent').children() would select all the .item elements.
<div class="parent"><div class="item">Child 1</div><div class="item">Child 2</div><div class="item">Child 3</div></div>
jQuery .parent
The jQuery .parent() method returns the parent element of a jQuery object.
<ul>ul <!-- this is the parent of li's one, two, six and ul three --><li class="one">li</li><li class="two">li</li><ul class="three"> <!-- this is the parent of li's four and five --><li class="four">li</li><li class="five">li</li></ul><li class="six">li</li></ul>
jQuery .next
The jQuery .next() method targets the next element that shares the same parent element as the original element.
In the following HTML code, the element returned by $('.two').next() would be <li class="three">Item three</li>.
<ul><li class="one">Item one</li><li class="two">Item two</li><li class="three">Item three</li></ul>
jQuery .find()
In jQuery, the .find() method will find and return all descendent elements that match the selector provided as an argument.
This code block shows a snippet of HTML that has a simple shopping list. Using jQuery, the list items inside the shopping list can be selected. The listItems variable will be a jQuery object that contains the two list items from the shopping list.
/*In HTML:<ul id='shopping-list'><li class='list-item'>Flour</li><li class='list-item'>Sugar</li></ul>*/// jQuery:const listItems = $('#shopping-list').find('.list-item');
jQuery .siblings
The jQuery .siblings() method targets all of the sibling elements of a particular element.
.siblings() can be used to add a selected class to an element on click and remove it from all of its sibling elements, ensuring that only one element appears as “selected” at one time.
$('.choice').on('click', event => {// Remove the 'selected' class from any siblings$(event.currentTarget).siblings().removeClass('selected');// Adds 'selected' class to that element only.$(event.currentTarget).addClass('selected');});
jQuery .closest
The jQuery .closest() method travels up through the DOM tree to find the first (and closest) ancestor element matching a selector string.
