Tutorial by Examples

To select the children of an element you can use the children() method. <div class="parent"> <h2>A headline</h2> <p>Lorem ipsum dolor sit amet...</p> <p>Praesent quis dolor turpis...</p> </div> Change the color of all the ...

When you need to iterate over the list of jQuery elements. Consider this DOM structure: <div class="container"> <div class="red one">RED 1 Info</div> <div class="red two">RED 2 Info</div> <div class="red three"...

To select siblings of an item you can use the .siblings() method. A typical example where you want to modify the siblings of an item is in a menu: <ul class="menu"> <li class="selected">Home</li> <li>Blog</li> <li>About</li&...

Returns the first element that matches the selector starting at the element and traversing up the DOM tree. HTML <div id="abc" class="row"> <div id="xyz" class="row"> </div> <p id="origin"> Hello &...

To get the next element you can use the .next() method. <ul> <li>Mark</li> <li class="anna">Anna</li> <li>Paul</li> </ul> If you are standing on the "Anna" element and you want to get the next element, "Paul...

To get the previous element you can use the .prev() method. <ul> <li>Mark</li> <li class="anna">Anna</li> <li>Paul</li> </ul> If you are standing on the "Anna" element and you want to get the previous element, &q...

To filter a selection you can use the .filter() method. The method is called on a selection and returns a new selection. If the filter matches an element then it is added to the returned selection, otherwise it is ignored. If no element is matched then an empty selection is returned. The HTML Thi...

.find() method allows us to search through the descendants of these elements in the DOM tree and construct a new jQuery object from the matching elements. HTML <div class="parent"> <div class="children" name="first"> <ul> ...