Scribd
Upload
215 views2 pages

jQuery DOM Traversing Methods Explained

The document discusses several jQuery methods for traversing the DOM: - .children() selects only direct child elements of the parent - .parent() selects the direct parent element - .siblings() selects all sibling elements - .closest() travels up the DOM tree to find the first ancestor matching a selector - .next() selects the next sibling element - .find() selects all descendant elements matching a selector

Uploaded by

ilias ahmed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
215 views2 pages

jQuery DOM Traversing Methods Explained

The document discusses several jQuery methods for traversing the DOM: - .children() selects only direct child elements of the parent - .parent() selects the direct parent element - .siblings() selects all sibling elements - .closest() travels up the DOM tree to find the first ancestor matching a selector - .next() selects the next sibling element - .find() selects all descendant elements matching a selector

Uploaded by

ilias ahmed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Cheatsheets / Learn jQuery

Learn jQuery: Traversing the DOM


jQuery children
The jQuery .children() method returns all child
elements of a selected parent element. <div class="parent">
This method only applies to the direct children of the   <div class="item">Child 1</div>
parent element, and not deeper descendents.   <div class="item">Child 2</div>
In the example code, $('.parent').children() would   <div class="item">Child 3</div>
select all the .item elements.
</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 .siblings
The jQuery .siblings() method targets all of the sibling
elements of a particular element. $('.choice').on('click', event => {
.siblings() can be used to add a selected class to an   // Remove the 'selected' class from any
element on click and remove it from all of its sibling siblings
elements, ensuring that only one element appears as   $(event.currentTarget).siblings().remove
“selected” at one time.
Class('selected');
  // Adds 'selected' class to that element
only.
  $(event.currentTarget).addClass('selecte
d');
});
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
The jQuery .next() method targets the next element
that shares the same parent element as the original <ul>
element.   <li class="one">Item one</li>
In the following HTML code, the element returned by   <li class="two">Item two</li>
$('.two').next() would be <li class="three">Item   <li class="three">Item three</li>
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. In HTML:
This code block shows a snippet of HTML that has a <ul id='shopping-list'>
simple shopping list. Using jQuery, the list items inside the     <li class='list-item'>Flour</li>
shopping list can be selected. The listItems variable will
  <li class='list-item'>Sugar</li>
be a jQuery object that contains the two list items from
</ul>
the shopping list.
*/

// jQuery:
const listItems = $('#shopping-
list').find('.list-item');

You might also like