Key Concepts
Review core concepts you need to learn to master this subject
jQuery children
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.
jQuery .parent
jQuery .parent
The jQuery .parent() method returns the parent element of a jQuery object.
jQuery .siblings
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.
jQuery .closest
jQuery .closest
The jQuery .closest() method travels up through the DOM tree to find the first (and closest) ancestor element matching a selector string.
jQuery .next
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>.
jQuery .find()
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.
- 1jQuery makes it easy to target HTML elements by tag name, class, and id. We can also dynamically target a single element in a given class by accessing an event’s .currentTarget attribute. In this l…
- 2According to the DOM tree, the outermost element is the parent of all elements inside of it. Therefore, the HTML elements inside of the outer element are children. The jQuery .children() method…
- 3In addition to the .children() method we covered in the last exercise, there are two methods you can use to select the parent and siblings of an element. $(‘.choice’).on(‘click’, event => { $(ev…
- 4To select an element close to the current element, we can use jQuery’s .closest() method. The .closest() method will travel up the DOM tree to find a specified selector closest to it. Its syntax l…
- 5Sometimes you don’t want to target all the siblings of an element — you just want to target the next one. That’s where the aptly-named .next() method comes in! The code below is HTML for a …
- 6Sometimes we want to target an element that lives inside another, but we don’t want to use the .children() method, since that might target more elements than we need. That’s where the .find() metho…
- 7Understanding how elements relate to each other in the DOM makes it easy to efficiently select elements. We have covered several methods in this lesson including: - .children() to target an eleme…
What you'll create
Portfolio projects that showcase your new skills
How you'll master it
Stress-test your knowledge with quizzes that help commit syntax to memory