10 very useful traversal functions in jquery

With jquery, you can easily select HTML elements. But sometimes, when the HTML structure is more complex, refining the elements of our choice is a troublesome thing. In this tutorial, we'll explore 10 ways to refine and expand the collection we're going to manipulate.

Html

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

Div.container is the parcel element;

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

Each div.star is a child of div.rating;

When Div.satr's class is "on," it is a complete star.

Why Traverse?

"Why do we have to refine a series of elements that are not strong enough for the jquery selection syntax?" ”

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

$ ('. Star '). Click (function () {$ (this). addclass (' on ');//       How do I select the parent element of the current object?//       How to get the current star on the left side of the star?});

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

Fortunately, jquery allows us to get a new set of elements based on these grassroots relationships, based on existing collections. And that's where the traversal function works.

1, children

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

In many cases it will be convenient to take a look at the following picture:

At the beginning, the star in the container is all selected;

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

If Chilidren () receives any parameters, all direct children will be returned;

Does not return a grandchild element.

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 collection.

The following example is straightforward. Star with Class "On" is filtered from 5 star.

3, not

Rather than filter, not () removes the matching element from the collection.

Look at the following example. The star of the even sequence is removed from the selection set, leaving an odd row of star.

"Note: the ' even ' and ' odd ' selectors are starting from 0, counting starting from 0, not from 1. ”

4. Add

What if we want to add some elements to the collection? The Add () function is exactly what it does.

Also simple and straightforward, photo boxes are added to the collection.

5, Slice

Sometimes, we need to get a subset of the collection based on the element's position in the collection. Sliece () is doing this.

The first parameter is the zero-based position of the first element, which is contained in the returned fragment;

The second parameter is the zero-based index of the first element. is not included in the returned fragment. If omitted, extends to the end of the collection;

Therefore, slice (0,2) will select the first two star.

6. Parent

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

As shown, the immediate parent of the first star is selected. Very handy, it should be noted that it only returns directly to the parent, why is it peculiar? Because no grandparent element or ancestor element is selected.

7, parents

This is the plural form, parents () selects all ancestor elements of the collection. I mean all ancestor elements include the direct parent to the "body" and "HTML" elements. Therefore, it is best to narrow down the selection results by passing expressions.

By passing the. Container parameter to parents (), Div.container will be selected and it is actually the first star's grandfather.

8, siblings

This function selects all siblings of a group of elements, passing an expression to filter the results.

Take a look at this example:

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

, the node for "odd" is selected. The index is zero-based and looks at the red number of star below.

9, Prev & Prevall

The prev () function selects the previous sibling node. Prevall () selects all sibling nodes in front of an element collection.
If you are building a star-rating widget, this will be quite handy. 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 real-world problems that make us headache.

[Javascript]$ ('. Star '). Click (function () {$ (this). AddClass ("on");//       How to get the parent of the current object? $ (this). Parent (). AddClass (' Rated ');//       How to get the star?$ (this) to the left of the current object. Prevall (). addclass (' on '); $ (this). Nextall (). Removeclass (' on ');}); [/javascript]

That's the problem that was mentioned earlier in this tutorial, right? In these lines of code we use these traversal functions.

In line 5th, look at the parent () function, Aha, it's simple.

In lines 8th and 9, Prevall () and Nextall (). Select the populated star and the empty star.

Now, the traversal function is easy to do. When used together, they will be more powerful. In other words, the output of one function is the input of another, and they are chained.

Original:http://net.tutsplus.com/tutorials/%20-ajax/10-super-helpful-traversing-functions-in-jquery/