filter()方法遍歷DOM節點操作用法詳解-js教程-PHP中文網

filter()方法遍歷DOM節點操作用法詳解

伊谢尔伦

發布： 2017-06-19 16:58:12

原創

1913 人瀏覽過

一、 .filter(selector)

這種用法是在已匹配的元素中依照給定的selector參數（jquery選擇器表達式）進行篩選，然後將匹配的元素包裝成jquery元素集合回傳。這個方法是用來縮小匹配範圍的，selector參數可以是多個表達式用逗號連接起來。來看範例：

HTML程式碼：

<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程式碼：

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

登入後複製

上面的jquery程式碼和下面的jquery程式碼效果是一樣的

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

登入後複製

再來看選擇器表達式用逗號連接起來的用法：

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

登入後複製

demo範例如下：

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

登入後複製

#二、 .filter( function(index) )

這種使用方法是對符合的元素進行遍歷，如果function(index)回傳的值為true的話，那麼這個元素就被選中，如果傳回一個值為false的話，那麼這個元素就不會被選取

index參數是目前的符合元素在原來的元素集合中的索引。下面的範例：

HTML程式碼：

<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程式碼：

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

登入後複製

上面程式碼的結果是第二個p元素和id為“ fourth」的p元素的邊框變成了雙線顏色為藍色

demo範例如下：


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

登入後複製

三、 .filter( element )

#element參數為DOM物件，如果element DOM物件和匹配的元素是同一個元素的話，那麼這個元素會被匹配。

看範例吧：

還是對上面的HTML程式碼，看jquery程式碼：

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

登入後複製

結果是id為third的p元素邊框有變化。

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

登入後複製

demo範例如下：


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

登入後複製

四、 .filter(jQuery object)

##這個用法和上面的. filter( element )的用法差不多，只是一個參數為DOM對象，一個參數為jquery對象。

看範例：

同樣是對上面的HTML程式碼，看jquery程式碼：

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

登入後複製

結果是id為third的p元素邊框有變化。

同樣直接用下面的jquery程式碼會更好：

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

登入後複製

demo範例如下：


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

登入後複製

以上是filter()方法遍歷DOM節點操作用法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！