DOM 노드를 순회하기 위한 filter() 메서드 사용에 대한 자세한 설명

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

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>

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

위 코드의 결과는 두 번째 p 요소와 ID가 "fourth"인 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 object

입니다. 요소 DOM 개체와 일치하는 요소가 동일한 요소이면 이 요소가 일치됩니다. . 예제를 보세요:

계속 위의 HTML 코드를 보면서 jquery 코드를 보세요:

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

결과적으로 ID가 3번째인 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)이 사용법은 하나의 매개변수가 DOM 개체이고 다른 매개변수는 jquery 객체입니다.

예제를 보세요:

위의 동일한 HTML 코드에 대해 jquery 코드를 보세요:

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

결과적으로 ID가 3번째인 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!