[jQuery] .find()와 .filter() 차이점

.find(), .filter() 차이점




find()와 filter()는 언듯보면 비슷한 역할을 하는 것 같지만 서로 다른 기능을 갖고있다.
기본적으로 find()는 현재 선택된 요소 집합의 내부(자식)를 대상으로 찾고자하는 요소를 찾는다.
반면 filter()는 선택된 현재집합의 DOM 요소를 찾아낸다.

 
<div>
    <a href="" class="exit">link</a>
    <a href="" class="exit">link</a>
    <a href=""></a>
    <a href=""></a>
    <a href="">
        <a href="" class="exit">link</a>
        <a href="" class="exit">link</a>
    </a>
    <a href="" class="exit">link</a>
    <a href="" class="exit">link</a>
    <a href="">link</a>
    <a href="">link</a>
    <a href=""></a>
</div>
 
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
    
    alert($('a').filter('.exit').length + 'exit links'); // 6 exit links 출력된다.
 
    alert($('a').find('.exit').length + 'exit links'); // 0 exit links 출력된다.
 
    alert($('div').find('.exit').length + 'exit links');  // 6 exit links 출력된다.
</script>

위의 코드 예제를 살펴보면 div 안에 a가 자식으로 위치해 있고 몇몇 a에는 exit라는 클래스명이 있다.

만약 a 선택자 중 exit 클래스를  .filter()로 찾는다면 값은 6으로 출력이 될 것이다.
그 이유는 .filter()가 현재 선택된 집합요소를 포함한 모든 요소를 찾아내기 때문이다.

반면 a를 .find()메서드를 이용해 exit 클래스를 찾게된다면 값은 0으로 출력이 된다.
그 이유는 .find()가 현재 선택된 집합요소를 찾아내지 않고 선택된 요소의 자식 중에 집합요소를 찾아내기 때문이다.


따라서 위의 코드를 기준으로 .find()를 사용해 exit클래스를 가진 a요소를 선택하고 싶다면
a요소의 부모인 div를 선택해서 .find()를 통해 exit클래스를 집합요소를 찾아내야 한다.