Use jQuery to select complex HTML traversal Functions

Introduction to Guoluo: Using jQuery, you can easily select HTML elements. However, when the HTML structure is complex, it is troublesome to extract the selected elements. In this tutorial, we will explore ten methods to refine and expand the set we will operate on. In jQuery, 10 very useful traversal functions use jQuery.

Introduction to Guoluo: Using jQuery, you can easily select HTML elements. However, when the HTML structure is complex, it is troublesome to extract the selected elements. In this tutorial, we will explore ten methods to refine and expand the set we will operate on.

10 very useful traversal functions in jQuery

With jQuery, you can easily select HTML elements. However, when the HTML structure is complex, it is troublesome to extract the selected elements. In this tutorial, we will explore ten methods to refine and expand the set we will operate on.

HTML

First, let's take a look at the simple page shown. Through this tutorial, We will select these elements.

Div. container is a package element;

Div. photo, div. title, and div. rating are the direct sublevels of div. container;

Each div. star is a sub-level of div. rating;

When the class of div. satr is "on", it is a complete star.

Why traverse?

"Why do we need to further refine a series of elements? Is jQuery's selection syntax not powerful enough ?"

Okay. Let's start with the example. On the 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 need to change the background color of All star parent elements. Therefore, our

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

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

// How do I select the parent element of the current object?

// How do I obtain all the stars on the left of the current star?

});

In the second row, we get the current object we click. But how to get the stars parent level? That is, div. rating. However, there are many div. rating in a page. Which one is what we want? How to obtain all the stars on the left of "this?

Fortunately, jQuery allows us to obtain new element sets based on these basic relationships. These are the places where traversal functions play a role.

1. children

This function obtains the direct sublevel of a group of elements.

In many cases, it is very convenient to look at the figure below:

At the beginning, all the stars in the container are selected;

Pass a selection expression to children () to narrow the selection result to the selected star;

If chilidren () accepts any parameter, all direct sublevels are returned;

The sun-level element is not returned.

Introduction to Guoluo: Using jQuery, you can easily select HTML elements. However, when the HTML structure is complex, it is troublesome to extract the selected elements. In this tutorial, we will explore ten methods to refine and expand the set we will operate on.

2. filter

This function filters elements from a collection by passing a selection expression. Any element that does not match this expression will be removed from the selected set.

The example below is straightforward. Filter out the stars whose class is "on" from the five stars.

3. not

Unlike filter, not () removes matching elements from the set.

Let's look at the example below. The star in the even column is removed from the selection set, leaving the star in the odd row.

"NOTE: The 'even' and 'odd' selectors start from 0 and count from 0, not from 1 ."

4. add

What if we want to add some elements to the set? The add () function does exactly this.

It is also simple and clear, and the photo box is added to the set.

Introduction to Guoluo: Using jQuery, you can easily select HTML elements. However, when the HTML structure is complex, it is troublesome to extract the selected elements. In this tutorial, we will explore ten methods to refine and expand the set we will operate on.

5. slice

Sometimes, we need to obtain the subset of the Set Based on the element position in the set. This is exactly what sliece () does.

The first parameter is the position of the first element starting from scratch, which is contained in the returned segment;

The second parameter is the index of the first element starting from scratch. It is not included in the returned clip. If omitted, it will extend to the end of the Set;

Therefore, slice () selects the first two stars.

6. parent

The parent () function selects the direct parent of a series of elements.

As shown in, the direct parent of the first star is selected. It is very convenient. It should be pointed out that it only returns the direct parent level. Why is it very strange? Because no grandfather or ancestor element is selected.

7. parents

This is a plural form. parents () selects all the ancestor elements of the set. I mean, all ancestor elements include directly parent-level to "body" and "html" elements. Therefore, it is best to narrow the selection result by passing the expression.

By passing the. iner parameter to parents (), div. container will be selected, which is actually the grandfather of the first star.

Introduction to Guoluo: Using jQuery, you can easily select HTML elements. However, when the HTML structure is complex, it is troublesome to extract the selected elements. In this tutorial, we will explore ten methods to refine and expand the set we will operate on.

8. siblings

This function Selects all siblings of a group of elements and passes an expression to filter the results.

Let's take a look at this example:

Who is the first brother node of star? The other four, right?

, "Odd" node is selected. The index starts from scratch. Let's look at the red number of star below.

9. prev & prevAll

The prev () function selects the previous sibling node. PrevAll () selects all the sibling nodes in front of an element set.

It would be quite convenient if you are building a star component. The sibling node in front of the third star is selected.

10. next & nextAll

These functions work the same way as prev and prevAll, But they choose the next sibling.

Conclusion

Finally, let's take a look at how to use these functions to solve the headaches in the real world.

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

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

// How do I obtain the parent level of the current object?

$ (This). parent (). addClass ('rated ');

// How do I obtain the star on the left of the current object?

$ (This). prevAll (). addClass ('on ');

$ (This). nextAll (). removeClass ('on ');

});

This is the problem mentioned earlier in this tutorial, right? In these lines of code, we use these traversal functions.

In row 3, let's look at the parent () function. Aha, it's really simple.

In rows 2 and 9, prevAll () and nextAll (). Select the filled star and the empty star.

Now, what is the convenience of the traversal function. They are even more powerful when used together. That is to say, the output of one function is the input of another function, which is chained.

Thank you for your reading. I hope this tutorial will be easier for you to select html elements through jQuery. What do you think? Which traversal function is missing?