웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > js

제이쿼리 not() 메소드 알아보기

Last Modified : 2019-08-01 / Created : 2019-07-06
7,722
View Count
제이쿼리(jQuery)에서 선택자 결과에 사용 가능한 not() 메소드에 대하여 알아봅니다. 어떻게 그리고 언제 사용할 수 있을까요?
 




# 제이쿼리 not() 메소드 알아보기

먼저 엘리먼트를 선택하기 위해서 선택자(selector)를 사용합니다. 이때 $(selector)를 사용하면 원하는 DOM엘리먼트가 선택되는데 여기에 .not() 메소드를 제외하면 어떻게 될까요? 바로 특정 조건이 아닌 태그 요소를 제외할 수 있게됩니다.

그렇기 때문에 여러개의 요소가 선택된 경우 원하는 요소만 적용하기 위해서 아닌 조건을 제외할 수 있다는 것이지요. 문법은 아래와 같이 사용합니다.

$(selector).not(notSelector)


즉 위의 selector가 더하기(Plus) 역할이라면 not()의 notSelector는 빼기(Minus)로 동작하게됩니다. 그럼 쉽게 예제를 만들어 쉽게 이해를 해보겠습니다.


! 제이쿼리 not() 예제보기

아래의 태그 목록을 봐주세요. 여기서 item이라는 클래스만 적용하고 notme라는 클래스를 가진 요소는 제외해서 선택자로 선택하려면 어떻게 할 수 있을까요?
<div class="item-list">
  <div class="item">1</div>
  <div class="item notme">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

이 때 아래처럼 선택자와 not()을 적용하면 매우 간단합니다.
var elements = $('.item-list').not('.item');
console.log(elements);

출력된 결과는 notme 클래스를 포함하지 않는 요소들만 선택자로 가져와 출력하게 됩니다.
<div class="item">1</div>
<div class="item">3</div>
<div class="item">4</div>

이제 위 요소들만 조작할 수 있겠죠. 여기까지 not()에 대하여 간단하게 알아보았습니다.


! 참고사항

다른 방법은 없을까요? 선택자에 :not()을 추가하는 방법이 있으면 위와 동일하게 결과를 도출할 수 있죠. 위 코드를 다른 방법으로 적용해볼께요.
var elements = $('.item-list').not('.item');  //  기존 코드
var elements = $('.item-list:not(.item)');  //  변경한 코드

둘 다 비슷하죠? 하나는 선택자 방법을 ... 다른 하나는 .not() 메소드를 사용한 방법으로 결과는 동일합니다.

Previous

자바스크립트 FormData 데이터 전송 알아보기

Previous

자바스크립트 객체 병합, 합치는 방법, merge