[Jquery] not() - 나머지 요소를 선택하는 방법

     

 

이번에는 not() 메소드로 선택한 요소 중에서 특정 선택자를 제외한 나머지 요소를 선택하는 방법에 대하여 알아보겠습니다.

 

not() 메소드

선택한 요소 중에서 특정 선택자의 요소를 제외한 나머지 요소를 모두 선택합니다.

즉, 지난 글에 포스팅된 filter() 메소드와는 반대의 기능을 가지고 있습니다.

 

 

예제를 통하여 not() 메소드를 다루어 보도록 하겠습니다.

아래 소스는 button을 클릭하면 <li> 요소 중 인덱스가 2보다 작은 요소를 제외한 나머지 요소들을 초록색 테두리로 씌우는 예제입니다.

<script>
    $(function() {
        $("button").on("click", function() {
            $("li").not(":lt(2)") // 선택한 <li>요소 중에서 인덱스가 2보다 작지 않은 요소만을 선택함.
                .css({"border": "2px solid green"});
        })
    })
</script>

 

 

출력 결과

 

인덱스가 2이상인 요소들만 초록색 테두리가 씌워진 것을 확인하실 수 있습니다.