.not()
원문 링크 
http://api.jquery.com/not/
개요 : 조건에 맞지 않는 것들만 찾아줍니다. 말이 어렵네요. 조건에 해당되지 않는 것이라고 하는게 더 맞는 표현이겠네요.
- .not( selector )
- selector 선택자 표현
- .not( elements )
- elements 하나 이상의 DOM 요소 표현
- .not( function(index) )
- function(index) 조건을 검사할 함수
.not() 함수를 사용하면 조건에 부합되는 DOM 요소들로 이루어진 새로운 jQuery 객체를 만들어 줍니다. 선택자가 제공되면 각 요소들을 테스트 하고 일치하지 않는 요소들을 결과에 포함시켜 줍니다.
자. 쉽게 예를 들어봅니다.
<ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul>
위 마크업에 리스트를 선택할 수 있는 스크립트를 적용해 보겠습니다.
$('li').not(':even').css('background-color', 'red');위 스크립트의 결과는 item 2와 4의 바탕색이 빨간색으로 변하게 됩니다. even은 인덱스 기준 짝수를 의미합니다.(다 아시죠?) .not() 함수이니 짝수가 아닌 것, 즉 인덱스 기준 홀수번째 리스트들이 선택되게 됩니다.
이번에는 elements를 인자로 하여 사용하는 방법에 대한 예제를 보도록 하겠습니다.
<ul> <li>list item 1</li> <li>list item 2</li> <li id="notli">list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul>
자 여기에 JavaScript의 네이티브 함수인 getElementById() 함수를 사용하는 예제를 보도록 하겠습니다.
$('li').not(document.getElementById('notli'))
.css('background-color', 'red');
getElementById 함수를 사용해 id='notli'라는 항목을 찾아낸 후 not()함수의 인자로 사용합니다. 그러면 그 항목을 제외한 다른 항목들이 선택되게 되죠. 따라서 item 1, 2, 4, 5 의 바탕색이 빨간색으로 변경됩니다.
.not()함수는 .filter()함수와 유사합니다. 단 filter() 함수는 결과가 true인 것들만 모아서 집합을 만들어 준다는 차이점이 있습니다.
위 처럼 다양하게 사용할 수 있습니다.
예 제
특정한 조건에 해당하지 않는 것들만 찾아내서 선의 색깔을 바꿔줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
div { width:50px; height:50px; margin:10px; float:left;
background:yellow; border:2px solid white; }
.green { background:#8f8; }
.gray { background:#ccc; }
#blueone { background:#99f; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div></div>
<div id="blueone"></div>
<div></div>
<div class="green"></div>
<div class="green"></div>
<div class="gray"></div>
<div></div>
<script>
$("div").not(".green, #blueone")
.css("border-color", "red");
</script>
</body>
</html>미리보기
스크립트를 보면 class='green'이거나 id='blueone'인 것들이 아닌 것들을 찾아내서 빨간 테두리를 그리는 내용입니다. 위 결과를 보시면 딱!!
간단하지만 중요한 함수입니다. 벌써 느낌이 딱 중요한 느낌이 나지 않나요?? ^^
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API 정복 - 특정 부모를 찾을 때까지, parentsUntil() (0) | 2011.06.29 |
|---|---|
| jQuery API 정복 - position으로 부모 찾기, offsetParent() (0) | 2011.06.29 |
| jQuery API 정복 - 부모들 찾기, parents() (0) | 2011.06.28 |
| jQuery API 정복 - 부모 찾기, parent() (0) | 2011.06.28 |
| jQuery API 정복 - 조건이 맞을 때까지 쭈욱, nextUntil() (0) | 2011.06.22 |
| jQuery API 정복 - 현재 요소의 다음 요소 모두, nextAll() (0) | 2011.06.21 |
| jQuery API 정복 - 현재 요소의 바로 다음 요소, next() (2) | 2011.06.09 |
| jQuery API 정복 - 결과를 배열로 돌려받기, map() (7) | 2011.06.08 |