jQuery find 와 filter 의 차이점

jQuery 에서 특정 하위 개체들에 대하여 검색을 할 경우 find() 혹은 filter() 함수를 사용할 수 있다.

이 두 함수는 비슷한듯 하지만 특정 분야에 최적화(?) 되어 있다고 할 수 있다.

말그대로 find 는 검색을 filter 는 필터링을 한다.

▶ HTML

<div id=fruits>

<div id=apple>apple</div>

<div id=kiwi>kiwi</div>

<div id=pineapple>pineapple</div>

</div>

▶ Scirpt (예제 소스는 한가지 방법이 아니라 다양하게 select 해오는 방법을 기술함)

1) find 예제

 - fruits div 하위에 있는 div 중 아이디가 apple 인 div 가져오기

 - script  

$("#fruits").find("[id=apple]")

 - 결과

<div id=fruits>

     <div id=apple>apple</div>

<div id=kiwi>kiwi</div>

<div id=pineapple>pineapple</div>

</div>

2) filter 예제

 - fruits div 하위에 있는 div 중 아이디가 kiwi 인 div 가져오기

 - script

$("#fruits div").filter(function () { return this.id == "kiwi"; })

 - 결과

<div id=fruits>

      <div id=apple>apple</div>

<div id=kiwi>kiwi</div>

<div id=pineapple>pineapple</div>

</div>

find 는 전체(혹은 기준 값 하위)에서 검색을 하지만 filter 는 자기 자신의 레벨에서 검색을 한다.

그래서 apple, kiwi, pineapple 을 검색하기 위하여 find 를 쓸때는 $("#fruits") 를 썼지만 filter 를 쓸때는 $("#fruits div") 로 사용하였다.

그래야 fruits div 하위이 div 를 검색할 수 있기 때문이다.

만약 filter 를 사용할때 $("#fruits) 을 사용했다면 하위가 아닌 fruits 자체를 kiwi 라는 아이디명과 비교했을 것이다.

빨강색 : $("#fruits).find() 의 대상이 되는 역역, $("#fruits div").filter() 이 대상이 되는 영역

파랑색 : $("#fruits).filter() 의 대상이 되는 영역