How jQuery traverses DOM node operations: filter () method, jquerydom

How jQuery traverses DOM node operations: filter () method, jquerydom

This article analyzes the filter () method of jQuery traversal DOM node operations. We will share this with you for your reference. The details are as follows:

. Filter (selector)

This method is used to filter matching elements by selector expression.
Remember: to use this method, you must pass in the selector expression parameter. Otherwise, the error "'nodetype 'is null or not an object" will be reported"

Note the differences between the filter method and the find method in jquery:
The filter method filters matching elements, while the find method filters child elements of matching elements.

Since jquery1.4, the filter method has added two new usages. Now there are four usages.

Let's take a look at these four usage methods:

I.. filter (selector)

This method filters matched elements based on the specified selector parameter (jquery selector expression), and then packs the matched elements into a jquery element set to return. This method is used to narrow the matching range. The selector parameter can be multiple expressions connected by commas.

Here is an example:

HTML code:

<ul>  <li>11111</li>  <li class="item">22222</li>  <li>33333</li>  <li>44444</li>  <li>55555</li>  <li>66666</li>  <li>77777</li></ul>

Jquery code:

$ ("Ul> li"). filter (": even" ).css ("color", "red"); // Changes the li background with an even index to red.

The jquery code above is the same as the jquery code below.

$ ("Ul> li: even" ).css ("color", "red"); // red indicates the even-numbered li background.

Let's take a look at the usage of the selector expression connected with commas:

$ ("Ul> li "). filter (": even ,. item "watermark .css (" color "," blue "); // Changes the li background with an even index and calss as an item to blue.

Demo example:

<Ul> <li> 11111 </li> <li class = "item"> 22222 </li> <li> 33333 </li> <li> 44444 </li> <li> 55555 </li> <li> 66666 </li> <li> 77777 </li> </ul> <input type = "button" id = "test1" value = "li"> <input type = "button" id = "test2" value = "li"> <script> $ (function () {$ ("# test1 "). click (function () {$ ("ul> li "). filter (": even" ).css ("color", "red"); // Changes the li background with an even index to red. // This formula and $ ("ul> li: even ").css (" color "," red "); equivalent}); $ (" # test2 "). click (function () {$ ("ul> li "). filter (": even ,. item ").css (" color "," blue "); // Changes the li background with an even index and calss as an item to blue}) ;}); </script>

Ii. filter (function (index ))

This method is used to traverse matched elements. If the value returned by function (index) is true, this element is selected. If the returned value is false, this element is not selected.

The index parameter is the index of the current Matching Element in the original element set.

If you are not clear about the above explanation (I am not able to express myself a little bit ~ ^_^), You can take a look at the following example:

HTML code:

<div id="first"></div><div id="second"></div><div id="third"></div><div id="fourth"></div><div id="fifth"></div><div id="sixth"></div>

Jquery code:

$("div").filter(function(index) {  return index == 1 || $(this).attr("id") == "fourth";}).css("border", "5px double blue");

The result of the above Code is that the border of the second div element and the div element whose id is "fourth" is changed to the double line color blue.

Demo example:

<Style> div {width: 60px; height: 60px; margin: 5px; float: left; border: 3px white solid; background: # ff0000 }</style> <div id = "first"> </div> <div id = "second"> </div> <div id = "third"> </div> <div id = "fourth"> </div> <div id = "th"> </div> <div id = "sixth"> </div> <br> <input type = "button" id = "test" value = "Click here to see the div changes above. "> <script >$ (" # test "). click (function () {$ ("div "). filter (function (index) {return index = 1 | $ (this ). attr ("id") = "fourth"; }).css ("border", "5px double blue") ;}); </script>

Iii. filter (element)

The element parameter is a DOM object. If the element DOM object and the matched element are the same element, the element will be matched. This method is newly added in version 1.4, so I haven't figured out how to use it.

Let's look at the example:

Check the jquery code for the preceding HTML code:
Copy codeThe Code is as follows: $ ("div"). filter (document. getElementById ("third" character bar .css ("border", "5px double blue ");

The result is that the border of the div element with id third has changed.

In this example, we can say why is it so troublesome? It is better to directly:

$("#third").css("border", "5px double blue");

Indeed, I think the same way, but since it is newly added in version 1.4, it will certainly be useful, it will not be a chicken, but my jquery level is too low, I haven't found it yet. If anyone else can think of it as useful, I 'd like to enlighten you!

Demo example:

<Style> div {width: 60px; height: 60px; margin: 5px; float: left; border: 3px white solid; background: # ff0000 }</style> <div id = "first"> </div> <div id = "second"> </div> <div id = "third"> </div> <div id = "fourth"> </div> <div id = "th"> </div> <div id = "sixth"> </div> <br> <input type = "button" id = "test" value = "Click here to see the div changes above. "> <script >$ (" # test "). click (function () {$ ("div "). filter (document. getElementById ("third" )).css ("border", "5px double blue") ;}); </script>

Iv. filter (jQuery object)

This usage is similar to the usage of. filter (element) above. It is just a DOM object with a parameter and a jquery object. I still feel quite confused.

Example:

For the preceding HTML code, see the jquery code:

$("div").filter($("#third")).css("border", "5px double blue");

The result is that the border of the div element with id third has changed.
It is better to directly use the following jquery code:

$("#third").css("border", "5px double blue");

Demo example:

<Style> div {width: 60px; height: 60px; margin: 5px; float: left; border: 3px white solid; background: # ff0000 }</style> <div id = "first"> </div> <div id = "second"> </div> <div id = "third"> </div> <div id = "fourth"> </div> <div id = "th"> </div> <div id = "sixth"> </div> <br> <input type = "button" id = "test" value = "Click here to see the div changes above. "> <script >$ (" # test "). click (function () {$ ("div "). filter ($ ("# third" )).css ("border", "5px double blue") ;}); </script>