-
[jQuery] .not() 사용법programming/JavaScript&jQuery 2019. 10. 25. 00:00반응형
jQuery .not() 사용법
먼저 아래와 같은 not.html 파일이 있다.
<html> <head> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> </head> <body> <ul id="test"> <button>test1</button> <br> <button>test2</button> <br> <button>test3</button> <br> <button>test4</button> <br> <button>test5</button> <br> </ul> <script src="./not.js"></script> </body> </html>그리고 아래와 같은 not.js 파일도 있다.
$("#test>button").click(function(){ $(this).text("click"); $("#test>button").not(this).text("unclick"); });해당 소스들을 실행하면,
실행 화면 이렇게 버튼이 5개 생기는데, 클릭된 버튼은 "click"로 텍스트가 바뀌고,
나머지 클릭되지 않은 버튼은 "unclick"로 텍스트가 바뀐다.
이때 사용한게 not()인데, not 뒤에 들어가는 요소를 제외하고 반환한다.
그러니까 저기서 this는 클릭된 버튼을 의미하고,
$("#test>button") 으로 선택된 모든 버튼 중, 클릭된 버튼 this만 제거하고, 나머지 4개의 버튼을 반환해준다.
반환된 버튼들은 "unclick"로 텍스트가 변경된다.
적용된 소스는 아래에서 확인 할 수 있다.
https://github.com/devdevdev09/htmlJsJquery/tree/master/example/not
devdevdev09/htmlJsJquery
Contribute to devdevdev09/htmlJsJquery development by creating an account on GitHub.
github.com
좀 더 자세한 설명을 원한다면 아래에서 찾아볼 수 있다.
.not() | jQuery API Documentation
Description: Remove elements from the set of matched elements. Given a jQuery object that represents a set of DOM elements, the .not() method constructs a new jQuery object from a subset of the matching elements. The supplied selector is tested against eac
api.jquery.com
반응형'programming > JavaScript&jQuery' 카테고리의 다른 글
[jQuery] each() 사용법 (0) 2019.10.31 [html&jQuery] $.data()로 data-value 속성 사용하기 (0) 2019.10.30 [JavaScript] eval() 사용법과 동적으로 변수 추가하기 (0) 2019.10.16 [JavaScript&jQuery] 코드에서 클릭 이벤트 발생시키기 (JavaScript) (0) 2019.08.30 [jQuery] 제이쿼리 오브젝트 합치기 - jQuery.extend() (0) 2019.08.21