[jQuery] jQuery 필터 메서드 사용법

이전글

[jQuery] jQuery 선택자(Selector) 필터 총정리

jQuery 필터 메서드

이전글에서는 jQuery에서 사용하는 선택자 문법 및 필터 구문을 알아보았습니다. 예를 들어 두 번째 td를 선택할때에는 0부터 시작하는 index를 기준으로 :eq(1) 을 선택자 필터로 사용하여 얻어올 수 있습니다.

$('td:eq(1)');                                                                            

그런데 필터구문은 선택자로도 제공되지만 jQuery의 메서드로도 제공되고 있습니다. 위의 구문은 eq(indext) 메서드로 다음과 같이 바꾸어 사용이 가능합니다.

$('td').eq(1); //선택한 td 요소들 중 1번 index 요소 (즉 두번째 요소);                        

이뿐만 아니라 jQuery 셀렉터 문법과 대응되는 기능의 다양한 메서드들을 제공하고 있습니다.

filter() 메서드

filter() 메서드를 통해 jQuery 기본 셀렉터 문법에서 사용하던 필터 구문을 사용할 수 있습니다. filter() 메서드는 두 가지 형식으로 사용할 수 있습니다.

$(셀렉터).filter(필터구문);
$(셀렉터).filter(function(index, selector){ });                                            

다음의 HTML 구성을 기준으로 예를 들어보겠습니다.

만약 td중 1, 3, 5, 7, 9 td요소를 선택하는 경우 다음과 같이 사용가능합니다. 즉 홀수 index를 가진 td 요소를 선택하는 경우입니다.  index는 0부터 시작한다는 점을 주의해야 합니다.

<script>                                                                             
    $(document).ready(function () { 
        var oddTds = $('td').filter(':even'); 
           
        $.each(oddTds, function (idex, td) { 
            console.log(td);
        });
    });
</script> 

filter() 메서드에 :even 이라는 필터 문자열을 지정했습니다. 즉 0, 2, 4, 6, 8 .. index값을 가진 td를 선택합니다.

filter() 메서드는 콜백함수를 넘겨주어 실행할 수도 있는데 실행될 함수의 매개변수로는 index와 selector 값이 넘어도록 되어있습니다. 콜백함수는 처음 셀렉터로 잡은 'td' 요소들을 0번째 요소부터 순회하면서 콜백함수를 실행시킵니다.

<script>                                                                             
    $(document).ready(function () { 
        $('td').filter(function (index, selector) { 
            if (index % 2 == 0) { 
                $(selector).css('background-color', 'red'); 
            }
        });
    });
</script> 

여기서는 콜백함수의 내용으로 index가 짝수인 경우 배경색을 빨강으로 변경하도록 하였습니다.

필터 메서드의 메서드 체이닝(Chaining)

여러 필터 메서드를 사용하는데에 있어서의 장점은 메서드 체이닝을 지원한다는 사실입니다. 다음과 같이 css() 메서드를 사용하고 나서 jQuery dom 객체를 반환하므로 연달아서 필터 메서드를 사용할 수 있는 장점이 있고, 코드를 훨씬 간결하게 작성할 수 있습니다.

<script>                                                                             
    $(document).ready(function () { 
        $('td') 
            .css('background-color', 'red') 
            .eq(3)
            .css('background-color', 'green'); 
    });
</script> 

모든 td 요소의 배경색을 빨강으로 변경한 이후 3번 index(네 번째) td의 배경색을 초록으로 변경해 주었습니다.

그 밖의 필터 메서드

지금까지의 필터 메서드 개념들을 살펴보면서 그밖의 필터 메서드들을 다음의 HTML 구성을 바탕으로 설명해보도록 하겠습니다. index가 사용될 때는 셀렉터로 선택한 첫번 째 요소의 index가 0부터 시작한다는 점을 주의해야 합니다.

first(), last() 메서드

첫번째 index 요소와 마지막 index 요소를 선택합니다.

<script>                                                                             
    $(document).ready(function () { 
        var firstValue = $('td').first().text(); 
        var lastValue = $('td').last().text(); 
 
 
        console.log('first() = ' + firstValue); 
        console.log('last() = ' + lastValue); 
    });
</script> 

next() 메서드

다음 요소를 선택합니다. 주의할점은 index상의 다음요소가 아닌 DOM 구조관계에서 형제관계중 내 다음으로 오는 요소입니다.

<script>                                                                             
    $(document).ready(function () { 
        var value = $('td').eq(0).next().text(); 
        console.log(value);
    });
</script> 

0번 index td의 다음 위치의 형제 요소는 1번 index td이기 때문에 2가 출력됩니다.

그러나 3번 index td의 다음 형제 요소는 존재하지 않습니다. 각 tr 하위에는 자식으로 세 개의 td만 존재하기 때문입니다. 따라서 아무것도 출력되지 않습니다.

prev() 메서드

이전 요소를 선택합니다. 주의할점은 index상의 이전요소가 아닌 DOM 구조관계에서 형제관계중 내 이전에존재하는 요소입니다.

<script>                                                                             
    $(document).ready(function () { 
        var value = $('td').eq(2).prev().text();
        console.log(value);
    });
</script> 

2번 index td의 이전 위치의 형제 요소는 1번 index td이기 때문에 2가 출력됩니다.

그러나 0번 index td의 이전 형제 요소는 존재하지 않습니다. 각 tr 하위에는 자식으로 세 개의 td만 존재하기 때문입니다. 따라서 아무것도 출력되지 않습니다.