Detailed explanation of the filter() method of jQuery traversing DOM node operations_jquery

This article uses an example to analyze the filter() method of jQuery traversing DOM nodes. Share it with everyone for your reference, the details are as follows:

.filter(selector)

This method is used to filter by selector expression in matching elements.
Remember: You must pass in the selector expression parameter when using this method, otherwise an error "'nodeType' is empty or not an object" will be reported

Also please note the difference between this filter method and the find method in jquery:
The filter method filters matching elements, while the find method filters descendant elements of matching elements.

Starting from jquery version 1.4, two new usages have been added to the filter method, and now there are four usages in total.

Let’s look at these four usages in detail:

1. .filter(selector)

This usage is to filter the matched elements according to the given selector parameter (jquery selector expression), and then package the matched elements into a jquery element collection and return it. This method is used to narrow the matching scope. The selector parameter can be multiple expressions connected with commas.

Look at 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");
//将索引为偶数的li背景变为红色

The above jquery code has the same effect as the following jquery code

$("ul>li:even").css("color","red");
//将索引为偶数的li背景变为红色

Let’s look at the use of selector expressions connected with commas:

$("ul>li").filter(":even,.item").css("color","blue");
//将索引为偶数和calss为item的li背景变为蓝色

The demo example is as follows:

<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="获取索引为偶数和calss为item的li">
<script>
$(function(){
  $("#test1").click(function(){
    $("ul>li").filter(":even").css("color","red");//将索引为偶数的li背景变为红色
    //这个式子和 $("ul>li:even").css("color","red"); 等效
  });
  $("#test2").click(function(){
    $("ul>li").filter(":even,.item").css("color","blue");//将索引为偶数和calss为item的li背景变为蓝色
  });
});
</script>

2. .filter( function(index) )

This method of use is to traverse the matching elements. If the value returned by function(index) is true, then the element will be selected. If the return value is false, then the element will not be selected

The index parameter is the index of the current matching element in the original element collection.

If you are not clear about the above explanation (my expression skills are a bit lacking~^_^), you can take a good 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 borders of the second div element and the div element with the id "fourth" become a double line color of blue

The demo example is as follows:

<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="fifth"></div>
<div id="sixth"></div>
<br><br><br><br><br><br>
<input type="button" id="test" value="点击我看看上面的div的变化">
<script>
$("#test").click(function(){
  $("div").filter(function(index) {
    return index == 1 || $(this).attr("id") == "fourth";
  }).css("border", "5px double blue");
});
</script>

3. .filter( element )

The element parameter is a DOM object. If the element DOM object and the matched element are the same element, then this element will be matched. This usage is newly added in version 1.4, I haven’t figured out what its use is yet

Look at the example:

Still looking at the above HTML code, look at the jquery code:

Copy code The code is as follows:

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

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

This example is very useless. People will say why bother? It’s better to go directly:

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

Indeed, I think so too, but since it is newly added in version 1.4, it will definitely be useful and will not be useless. It’s just that my jquery level is still too low and I haven’t discovered it yet. If any reader has any idea of ​​a use, I hope you can enlighten me!

The demo example is as follows:

<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="fifth"></div>
<div id="sixth"></div>
<br><br><br><br><br><br>
<input type="button" id="test" value="点击我看看上面的div的变化">
<script>
$("#test").click(function(){
  $("div").filter(document.getElementById("third")).css("border", "5px double blue");
});
</script>

4. .filter(jQuery object)

This usage is similar to the usage of .filter(element) above, except that one parameter is a DOM object and the other parameter is a jquery object. I still feel it is a bit useless.

See example:

For the same HTML code above, look at 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 would be better to use the following jquery code directly:

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

The demo example is as follows:

<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="fifth"></div>
<div id="sixth"></div>
<br><br><br><br><br><br>
<input type="button" id="test" value="点击我看看上面的div的变化">
<script>
$("#test").click(function(){
  $("div").filter($("#third")).css("border", "5px double blue");
});
</script>

Readers who are interested in more jQuery-related content can check out the special topics on this site: "JQuery traversal algorithm and skills summary", "jQuery table (table) operation skills summary" , "Summary of jQuery drag effects and techniques", "Summary of jQuery extension techniques", "Summary of jQuery common classic special effects", "jQuery animation and special effects usage summary", "jquery selector usage summary" and "jQuery common plug-ins and usage summary"

I hope this article will be helpful to everyone in jQuery programming.