('prev + next') 선택자는 현재 선택된 요소를 기준으로 그 다음 선택자와 일치하는 첫번째 요소를 찾아줍니다.
원문 링크 
http://api.jquery.com/next-adjacent-Selector/
- jQuery('prev + next')
- prev 유효한 선택자
- next prev 에 선택된 요소 다음에 오는 next에 해당하는 선택자
한가지 중요한 고려해야 할 포인트가 있습니다. (prev + next) 와 (prev ~ sibilings) 인데요. 약간의 차이점이 있습니다. prev + next 는 prev 에 해당하는 선택자를 기준으로 next 에 해당하는 요소를 깊이에 상관없이 선택을 할 수 있습니다. 반면 prev + sibilings 는 prev 에 해당하는 같은 깊이의 다음 요소를 선택할 수 있다는 겁니다. 즉, 전자는 형제 요소와 무관하고 후자는 같은 부모 요소를 둔 형제요소를 선택할 수 있다는 뜻입니다.
해석이 좀 애매합니다. 예제를 보고 좀 풀어쓰면 별게 아닌데, 이걸 옮겨 적자니 참 표현할 방법이 마땅치가 않습니다. ^^;; 바로 아래 예제로 가시죠.
예 제
label 요소 바로 다음에 오는 input 요소를 찾아서 "Labeled!' 라는 문자를 넣습니다.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
<script>$("label + input").css("color", "blue").val("Labeled!")</script>
</body>
</html>
미리보기
다음 포스트가 prev ~ sibilings 가 되겠네요~.
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API 정복 - 홀수번째 요소 찾기 : odd (2) | 2011.02.17 |
|---|---|
| jQuery API 정복 - n번째 자식요소 찾기 : nth-child (5) | 2011.02.16 |
| jQuery API 정복 - ~이 아닌 요소 선택하기 : not (3) | 2011.02.16 |
| jQuery API 정복 - 다음 형제 요소 찾기 : next ~ siblings (6) | 2011.02.15 |
| jQuery API 정복 - 한번에 여러 요소 선택하기 : Multiple Selector (2) | 2011.02.14 |
| jQuery API 정복 - 다중 속성 필터를 이용한 요소 선택 : Mutiple Attribute Selector (2) | 2011.02.12 |
| jQuery API 정복 - 마지막 자식 요소 찾기 : last (2) | 2011.02.12 |
| jQuery API 정복 - 마지막 자식 요소들 찾기 : last-child (2) | 2011.02.11 |