.nextAll()
원문 링크 
http://api.jquery.com/nextAll/
개요 : 선택 집합의 각 요소별로 바로 다음에 오는 모든 요소등을 반환해 줍니다. 선택자를 인자로 가질 수 있습니다.
- .nextAll( [ selector ] )
- selector 요소를 선택하기 위해 필요한 선택자 문자열
.nextAll() 함수는 DOM 트리를 기준으로 하여 조건에 맞는 모든 후임 요소들을 새로운 jQuery 객체로 만들어 반환해 줍니다.
이 함수에는 $() 함수에 사용할 수 있는 모든 선택자 표현이 올 수 있습니다. 만일 그 선택자가 주어졌고 그 선택자에 의해 선택될 수 있는 바로 다음 요소들이 있다면 jQuery 객체가 반환되고 그렇지 않다면 제외됩니다.
이전 아티클인 next() 함수의 확장판이네요. 하나냐 복수냐의 차이가 있습니다. 단, nextAll()은 같은 깊이에 있는 요소들만 선택이 된다는 점입니다. 아래 첫번째 예제로 확인하실 수 있습니다. 따로 길게 설명드리지 않아도 되겠네요. ㅎㅎ
그럼 여기서 .nextAll() 함수의 간단한 예제로 개념을 익혀보도록 하겠습니다.
<ul> <li>list item 1</li> <li>list item 2</li> <li class="third-item">list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul>
3번째 부터 시작해서 그 다음으로 오는 모든 요소들을 찾고 싶으시다면 아래와 같이 스크립트를 작성하시면 됩니다.
$('li.third-item').nextAll().css('background-color', 'red');이 스크립트의 결과는 item 4, 5 가 빨간색으로 바뀌게 됩니다. 선택자 표현을 포함하지 않았기 때문에 선택된 요소인 item 3 다음으로 오는 요소를 무조건 선택하게 됩니다. 만일 선택자 표현을 추가하면 다음 요소를 선택하기 전에 선택자에 의한 검증을 실시하게 됩니다.
말만 어렵습니다. 예제보면 별거 아닙니다. 이게 뭔소리야 하고 짜응 내고 계신가요?? ^^
예 제
first 클래스명을 가진 div 이후의 요소들을 모두 선택합니다.
<!DOCTYPE html>
<html>
<head>
<style>
div { width: 80px; height: 80px; background: #abc;
border: 2px solid black; margin: 10px; float: left; }
div.after { border-color: red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div>first</div>
<div>sibling<div>child</div></div>
<div>sibling</div>
<div>sibling</div>
<script>$("div:first").nextAll().addClass("after");</script>
</body>
</html>미리보기
child라고 되어 있는 div는 테두리가 검습니다. 위에 언급드린 같은 깊이에 있는 내용만 선택된다는 내용을 확인하는 순간이십니다. :-)
예 제
body를 구성하는 요소 중 인덱스 번호가 1인 즉 2번째로 나오는 요소를 찾아 그 다음 요소들을 찾아냅니다. 단, nextAll에 p 선택자를 인자로 하여 조건을 만듭니다.
<!DOCTYPE html>
<html>
<head>
<style>
div, p { width: 60px; height: 60px; background: #abc;
border: 2px solid black; margin: 10px; float: left; }
.after { border-color: red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>p</p>
<div>div</div>
<p>p</p>
<p>p</p>
<div>div</div>
<p>p</p>
<div>div</div>
<script>
$(":nth-child(1)").nextAll("p").addClass("after");
</script>
</body>
</html>
미리보기
p 요소들만 선택된 결과를 보실 수 있습니다.
nextAll() 함수와 next() 함수가 연속적으로 나와 거저 먹은듯 ^^;; 둘을 잘 구분하시어 사용하시기 바랍니다.
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API 정복 - 부모들 찾기, parents() (0) | 2011.06.28 |
|---|---|
| jQuery API 정복 - 부모 찾기, parent() (0) | 2011.06.28 |
| jQuery API 정복 - ~가 아닌 것, not() (4) | 2011.06.27 |
| jQuery API 정복 - 조건이 맞을 때까지 쭈욱, nextUntil() (0) | 2011.06.22 |
| jQuery API 정복 - 현재 요소의 바로 다음 요소, next() (2) | 2011.06.09 |
| jQuery API 정복 - 결과를 배열로 돌려받기, map() (7) | 2011.06.08 |
| jQuery API 정복 - 마지막 요소 찾기, last() (0) | 2011.05.31 |
| jQuery API 정복 - 맞는지 확인하기, is() (6) | 2011.05.30 |