jQuery遍歷DOM節點運算之filter()方法詳解

本文實例分析了jQuery遍歷DOM節點操作之filter()方法。分享給大家參考，具體如下：

.filter(selector)

此方法用於在匹配元素中按照選擇器表達式進行篩選。
記住：使用此方法必須得傳入選擇器表達式參數，不然會報錯「'nodeType' 為空或不是物件」

另外請注意這個filter方法和jquery中的find方法的區別:
filter方法是對匹配元素進行篩選，而find方法是對匹配元素的後代元素進行篩選。

從jquery1.4版本開始，filter方法又增加了兩個新的用法，現在一共有四種用法了。

下面來具體看看這四種用法：

一、 .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>
<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>

登入後複製

二、 .filter( function(index) )

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

index參數是目前的匹配元素在原來的元素集合中的索引。

如果您對上面的解釋不清楚的話（本人表達能力有點欠缺~^_^），可以好好看看下面的例子：

HTML程式碼：

<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代碼：

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

登入後複製

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

demo範例如下：

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

登入後複製

三、 .filter( element )

element參數為DOM對象，如果element DOM物件和匹配的元素是同一個元素的話，那麼這個元素會被匹配。這種用法是1.4版新加的，我還沒想出來有什麼用處

看例子：

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

複製程式碼程式碼如下:

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

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

這個例子舉得很雞肋，大家會說何必這麼麻煩呢？不如直接:

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

登入後複製

的確，我也是這樣想的，但是既然是1.4版本新加的，那肯定會是有用到的地方的，不會是雞肋的，只是我的jquery水平還太低，還沒發現而已，如果哪位看官有想到用處的話，還望賜教！

demo範例如下：

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

登入後複製

四、 .filter(jQuery object)

這個用法和上面的.filter( element )的用法差不多，只是一個參數為DOM對象，一個參數為jquery對象，我還是感覺比較雞肋。

看範例：

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

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

登入後複製

結果是id為third的div元素邊框有變化。
同樣直接用下面的jquery程式碼會比較好：

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

登入後複製

demo範例如下：

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

登入後複製

更多關於jQuery相關內容有興趣的讀者可查看本站專題：《jQuery遍歷演算法與技巧總結》、《jQuery表格(table)操作技巧總結》、《jQuery拖曳特效與技巧總結》、《jQuery擴充技巧總結》、《jQuery常見經典特效總結》、《jQuery動畫與特效用法總結》、《jquery選擇器用法總結》及《jQuery常用插件及用法總結》

希望本文所述對大家jQuery程式設計有所幫助。