[Traversing] JQ - filter() 메서드 -일치범위축소 (= 필터메서드) ※ 자식요소소유개수선택자 (= 자식개수선택자)

filter() 예제

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("p").filter(".hz").css("background-color", "yellow");

});

</script>

<p class="hz">홈짱닷컴</p>

<p class="hz">Homzzang.com</p>

<p>홈페이지 제작관리강의 + 그누보드강의</p>

 

결과보기

filter() 정의

 

특정기준과 일치하는 요소 반환.

 

---

 

1.

기준을 지정 후 기준과 일치하는 것만 반환시킴.

 

2.

종종 선택한 요소 그룹에서 요소 검색 범위를 좁히는 데 사용.

 

3.

filter() 메소드는 not() 메소드와 반대.

 

4.

find() 메서드

 

filter() 구문

 

$(selector).filter(criteria,function(index))

 

---

 

[매개변수]

 

criteria

선택. 선택된 요소 그룹에서 반환할 선택자 표현식.
jQuery 객체 또는 하나 이상의 요소 지정.

여러 기준 지정하려면, 쉼표 (,) 사용.

 

function(index)

선택. 세트의 각 요소에 대해 실행할 함수를 지정. 

true를 반환하면 요소가 유지. 그렇지 않으면 요소가 제거됨.

index - 세트 내의 요소의 인덱스 위치.

참고 : 이것은 현재 DOM 요소임.

 

filter() 예제2 - 여러가지 기준

 

2-1. 

가상선택자 :  짝수번째 p요소

$("p").filter(":even").css("background-color", "yellow");

 

2-2. 

다중기준 :  클래스가 hz이거나 아이디가 hz인 모든 모든 p요소

$("p").filter(".hz,#hz").css("background-color", "yellow");

 

2-3.

jQuery 객체 :  div 요소의 자손 중 클래스가 hz인 모든 p요소

$("p").filter($("div p.hz")).css("background-color", "yellow");

 

2-4. 

DOM  :  아이디가 hz인 p요소

$("p").filter(document.getElementById("hz")).css("background-color", "yellow");

 

2-5.

함수  :  자식요소로 span 요소를 2개 갖고 있는 p요소 (= 자식요소소유개수선택자 = 자식개수선택자)

$("p").filter(function(){  

    return $("span", this).length == 2;}).css("background-color", "yellow");

 

filter() 예제2-5 - 자식요소소유개수선택자 예제

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("p").filter(function(){  

    return $("span", this).length == 2;}).css("background-color", "yellow");

});

</script>

<div>

  <p>span 1개 - <span>홈짱닷컴</span></p>

  <p>span 2개 - <span>홈짱닷컴</span> <span>Homzzang.com</span></p>

  <p>span 1개 - <span>홈짱닷컴</span></p>

  <p>span 2개 - <span>홈짱닷컴</span> <span>Homzzang.com</span></p>

  <p>span 0개</p>

</div>

 

결과보기