Detailed explanation of the usage of filter() method to traverse DOM nodes-JS Tutorial-php.cn

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

伊谢尔伦

Release： 2017-06-19 16:58:12

Original

1931 people have browsed it

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>

Copy after login

Jquery code:

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

Copy after login

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

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

Copy after login

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背景变为蓝色

Copy after login

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>

Copy after login

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>

Copy after login

jquery code:

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

Copy after login

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>

Copy after login

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");

Copy after login

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

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

Copy after login

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>

Copy after login

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");

Copy after login

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");

Copy after login

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>

Copy after login

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!