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.