Detailed explanation of the usage of filter() method to traverse DOM nodes

1. .filter(selector)

This usage is based on the given selector parameter (jquery selectorexpression in the matched element ) to filter, and then package the matching 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 the 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 take a look at the usage of connecting selector expressions 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>


<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 this element will be selected. If the return value is false, then this element will be selected. The element will not be selected

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

HTML code:

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

jquery code:

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

The result of the above code is the second p element with the id " The border of the p element of "fourth" has changed to a double line color and is blue

The demo example is as follows:

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








<script>
$("#test").click(function(){
  $("p").filter(function(index) {
    return index == 1 || $(this).attr("id") == "fourth";
  }).css("border", "5px double blue");
});
</script>

3. .filter(element)

# The ##element parameter is the

DOM object. If the element DOM object and the matched element are the same element, then this element will be matched.

Look at the example:

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

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

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

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

Demo examples are as follows:

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








<script>
$("#test").click(function(){
  $(&quot;p&quot;).filter(document.getElementById(&quot;third&quot;)).css(&quot;border&quot;, &quot;5px double blue&quot;);
});
</script>

4. .filter(jQuery object)

This usage is the same as the above. The usage of filter(element) is similar, except that one parameter is a DOM object and the other parameter is a jquery object.

Look at the example:

Similarly to the above HTML code, look at the jquery code:

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

The result is that the border of the p element with the 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:

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








<script>
$("#test").click(function(){
  $(&quot;p&quot;).filter($(&quot;#third&quot;)).css(&quot;border&quot;, &quot;5px double blue&quot;);
});
</script>

The above is the detailed content of Detailed explanation of the usage of filter() method to traverse DOM nodes. For more information, please follow other related articles on the PHP Chinese website!