DOM ノードをトラバースするための filter() メソッドの使用法の詳細な説明-jsチュートリアル-php.cn

DOM ノードをトラバースするための filter() メソッドの使用法の詳細な説明

伊谢尔伦

リリース： 2017-06-19 16:58:12

オリジナル

1913 人が閲覧しました

1. .filter(selector)

この使用法は、指定されたセレクターパラメーター (jquery selectorexpression) に従って一致した要素をフィルターし、一致した要素をコレクションが返す 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>


<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 の場合、一致する要素を走査します。 this 要素は選択されています。戻り値が 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");

ログイン後にコピー

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

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


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

element パラメータが

DOM オブジェクト

である場合、要素 DOM オブジェクトと一致する要素が一致します。。例を見てください:

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

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

ログイン後にコピー

その結果、3 番目の ID を持つ p 要素の境界線が変更されています。

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

ログイン後にコピー

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


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

ログイン後にコピー

IV. .filter(jQuery

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

例を見てください:

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

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

ログイン後にコピー

その結果、3 番目の ID を持つ p 要素の境界線が変更されています。

次の jquery コードを直接使用する方が良いでしょう:

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

ログイン後にコピー

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


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

ログイン後にコピー

以上がDOM ノードをトラバースするための filter() メソッドの使用法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。