programming/JavaScript&jQuery

[jQuery] .not() 사용법

LeeBorn 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

 

좀 더 자세한 설명을 원한다면 아래에서 찾아볼 수 있다.

https://api.jquery.com/not/

 

.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

반응형