DOMノードを横断するjQueryのfilter()メソッドの詳細説明operations

DOMノードを横断するjQueryのfilter()メソッドの詳細説明operations_jquery

WBOY

リリース： 2016-05-16 15:05:30

オリジナル

1566 人が閲覧しました

この記事では、DOM ノードをトラバースする jQuery の filter() メソッドを分析する例を使用します。参考のために皆さんと共有してください。詳細は次のとおりです:

.filter(セレクター)

このメソッドは、一致する要素をセレクター式でフィルターするために使用されます。
覚えておいてください: このメソッドを使用するときは、セレクター式パラメーターを渡す必要があります。そうしないと、「'nodeType' が空であるか、オブジェクトではありません」というエラーが報告されます

また、このフィルターメソッドと jquery の find メソッドの違いにも注意してください:
filter メソッドは一致する要素をフィルタリングし、find メソッドは一致する要素の子孫要素をフィルタリングします。

jquery バージョン 1.4 から、filter メソッドに 2 つの新しい使用法が追加され、現在は合計 4 つの使用法があります。

これら 4 つの使用法を詳しく見てみましょう:

1. .filter(セレクター)

この使用法は、指定されたセレクターパラメーター (jquery セレクター式) に従って一致した要素をフィルターし、一致した要素を jquery 要素コレクションにパッケージ化して返します。このメソッドは、一致範囲を狭めるために使用されます。セレクターパラメーターには、カンマで接続された複数の式を指定できます。

例を見てみましょう:

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

ログイン後にコピー

デモの例は次のとおりです:

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

この使用方法は、function(index) によって返された値が true の場合、要素が選択されます。戻り値が false の場合、要素は選択されません。

インデックスパラメーターは、元の要素コレクション内の現在一致する要素のインデックスです。

上記の説明がよくわからない場合は (私の表現力が少し足りない~^_^)、次の例をよく見てください:

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>

ログイン後にコピー

jクエリコード:

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

ログイン後にコピー

上記のコードの結果、2 番目の div 要素と ID「fourth」の div 要素の境界線は青色の二重線になります

デモの例は次のとおりです:

<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(要素)

要素パラメータが DOM オブジェクトである場合、要素 DOM オブジェクトと一致する要素が同じ要素である場合、この要素は一致します。この使い方はバージョン1.4で新しく追加されたものですが、まだ何に使うのか分かりません

例を見てください:

上記の HTML コードを引き続き見て、jquery コードを見てください:

コードをコピーしますコードは次のとおりです。

$("div").filter(document.getElementById("third ")) .css("ボーダー", "5px ダブルブルー");

その結果、3 番目の ID を持つ div 要素の境界線が変更されました。

この例は非常に役に立たない、なぜわざわざそんなことをするのかと言う人もいるでしょう。直接アクセスすることをお勧めします:

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

ログイン後にコピー

確かに私もそう思いますが、バージョン1.4で新しく追加されたものなので、間違いなく役に立つでしょうし、役に立たないわけではありません。ただ、私のjqueryレベルがまだ低すぎて、まだ発見できていないだけです。読者の方が使用方法を思いついた場合は、ぜひ教えていただければ幸いです。

デモの例は次のとおりです:

<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 オブジェクト)

この使用法は、上記の .filter(element) の使用法と似ていますが、1 つのパラメーターが DOM オブジェクトで、もう 1 つのパラメーターが jquery オブジェクトである点が異なります。

例を参照:

上記と同じ HTML コードについては、jquery コードを見てください:

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

ログイン後にコピー

その結果、3 番目の ID を持つ div 要素の境界線が変更されました。
次の jquery コードを直接使用することをお勧めします:

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

ログイン後にコピー

デモの例は次のとおりです:

<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 プログラミングのすべての人に役立つことを願っています。