10 very useful traversal functions in jQuery

Using jQuery , you can easily select HTML elements. But sometimes, when the HTML structure is more complex, refining the elements we choose is a troublesome thing. In this tutorial, we'll explore ten ways to refine and expand the collections we'll be working with.

HTML

First, let's look at the simple page shown below, and through this tutorial we will select the elements.

1. div.container is the wrapping element;
2. div.photo , div.title , and div.rating are direct children of div.container ;
3. Each div.star is a child of div.rating ;
4. When the class of div.satr is "on" , it is a complete sta
5. .
6. Why traverse?

   " Why do we need to further refine a series of elements? Is it because the jQuery selection syntax is not powerful enough? "

   Okay, let's start with an example. In the web page mentioned above, when a star is clicked, we need to add class "on" to it and each star on the left . At the same time, we want to change the background color of all star parent elements, so our code is as follows:

   On the second line, we get the current object we clicked on. But how to get the parent of stars ? That is div.rating . However, in one page, there are many div.rating . Which one do we want? How to get all the stars to the left of "this" ?

   The good news is that jQuery allows us to obtain new collections of elements based on existing collections based on these basic relationships. And these are where traversal functions come into play.

   1. children​

   This function gets the direct children of a set of elements.

   This can be very convenient in many situations, take a look at the picture below:

   1. At the beginning, all stars in the container are selected;
   2. Pass a selection expression to children() to narrow the selection results to the selected star ;
   3. If children() accepts any parameters, all direct children will be returned;
   4. Grandchild elements are not returned.
   5. 

   $('.star').click(function(){

            $(this).addClass('on');

   //        How to select the parent element of the current object ?

   //        How to get all the stars to the left of the current star ?

   });