DOM 노드를 순회하는 jQuery의 filter() 메서드에 대한 자세한 설명

이 기사에서는 DOM 노드를 순회하는 jQuery의 filter() 메서드를 분석하는 예제를 사용합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

.filter(선택기)

이 방법은 일치하는 요소에서 선택기 표현식을 기준으로 필터링하는 데 사용됩니다.
기억하세요: 이 방법을 사용할 때 선택기 표현식 매개변수를 전달해야 합니다. 그렇지 않으면 "'nodeType'이 비어 있거나 객체가 아닙니다."라는 오류가 보고됩니다.

또한 이 필터 메서드와 jquery의 find 메서드 사이의 차이점에 유의하세요.
필터 메소드는 일치하는 요소를 필터링하고, find 메소드는 일치하는 요소의 하위 요소를 필터링합니다.

jquery 버전 1.4부터 필터 메서드에 두 가지 새로운 사용법이 추가되어 이제 총 네 가지 사용법이 있습니다.

이 네 가지 사용법을 자세히 살펴보겠습니다.

1. 필터(선택기)

이 사용법은 주어진 선택기 매개변수(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( 함수(색인) )

이 사용 방법은 함수(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 요소의 테두리가 파란색의 이중선 색상이 되는 것입니다

데모 예시는 다음과 같습니다.

<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. 필터( 요소 )

요소 매개변수는 DOM 개체입니다. 요소 DOM 개체와 일치하는 요소가 동일한 요소이면 이 요소가 일치됩니다. 이 사용법은 1.4 버전에 새로 추가된 기능인데 아직 어떤 용도인지는 모르겠습니다

예제 보기:

그래도 위의 HTML 코드를 보면서 jquery 코드를 살펴보세요.

코드 복사 코드는 다음과 같습니다.

$("div").filter(document.getElementById("third ")) .css("테두리", "5px 이중 파란색");

결과적으로 ID가 3번째인 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) 사용법과 유사합니다. 단, 한 매개변수는 DOM 개체이고 다른 매개변수는 jquery 개체라는 점만 다릅니다.

예 보기:

위의 동일한 HTML 코드에 대해서는 jquery 코드를 살펴보세요.

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

결과적으로 ID가 3번째인 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 관련 콘텐츠에 관심이 있는 독자들은 이 사이트에서 특별한 주제를 확인할 수 있습니다: "JQuery 순회 알고리즘 및 기술 요약", "jQuery 테이블(테이블) 작업 기술 요약 " , "jQuery 드래그 효과 및 기법 요약", "jQuery 확장 기법 요약", "jQuery 공통 클래식 특수 효과 요약" , "jQuery 애니메이션 및 특수 효과 사용 요약", "jquery 선택기 사용 요약" 및 "jQuery 일반 플러그인 및 사용 요약"

이 기사가 jQuery 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.