('prev ~ siblings) 는 prev 에 해당하는 요소와 같은 위치의 형제요소를 찾아줍니다.
원문 링크 
http://api.jquery.com/next-siblings-selector/
- jQuery('prev ~ siblings')
- prev 유효한 선택자
- siblings 선택된 요소와 형제 위치에 있는 요소들
sibling 의 단어의 뜻을 알면 아주 쉬운 문제입니다. sibling 은 형제,자매라는 뜻입니다. 바로 이해되시죠?. 이전에 말씀드린 'prev + next'와 'prev ~ siblings'를 잘 구분해서 사용하셔야 합니다.
예 제
우선 prev 라는 id를 가진 요소를 찾습니다. 그 요소 다음으로 오는 div를 찾습니다. 단, 찾을 div는 모두 같은 부모를 두고 있는 형제의 관계인 것만 찾게 됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
div,span {
display:block;
width:80px;
height:80px;
margin:5px;
background:#bbffaa;
float:left;
font-size:14px;
}
div#small {
width:60px;
height:25px;
font-size:12px;
background:#fab;
}
</style>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<div>div (doesn't match since before #prev)</div>
<span id="prev">span#prev</span>
<div>div sibling</div>
<div>div sibling <div id="small">div niece</div></div>
<span>span sibling (not div)</span>
<div>div sibling</div>
<script>$("#prev ~ div").css("border", "3px groove blue");</script>
</body>
</html>
미리보기
위 예제를 잘 보시면 div 안에 div를 보실 수 있습니다. 미리보기에서 "div niece"라고 텍스트가 적힌 영역입니다. 이 div 는 부모가 다른 div 와 다릅니다. 테두리가 그려진 div의 부모 요소는 body 요소인데 반해, 이 div는 부모로 div 요소를 가지고 있습니다. 그래서 이 div는 다른 div와 형제관계가 아닌 겁니다.
같은 깊이라는 의미가 좀 모호하긴 하지만, 깊이가 같은 요소들끼리를 모두 형제자매라고 보시면 될 듯합니다.
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API 정복 - 유일한 자식 요소 찾기 : only-child (8) | 2011.02.17 |
|---|---|
| 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 정복 - 다음 요소 선택하기 : prev + next (5) | 2011.02.14 |
| jQuery API 정복 - 한번에 여러 요소 선택하기 : Multiple Selector (2) | 2011.02.14 |
| jQuery API 정복 - 다중 속성 필터를 이용한 요소 선택 : Mutiple Attribute Selector (2) | 2011.02.12 |
| jQuery API 정복 - 마지막 자식 요소 찾기 : last (2) | 2011.02.12 |