.siblings()
원문 링크 
http://api.jquery.com/siblings/
개요 : 형제 요소들을 찾아 줍니다. 선택자를 인자로 줄 수 있습니다.
- .siblings( [selector] )
- selector 선택자
.siblings() 함수는 DOM 트리 상의 형제 요소들을 찾아 새로운 jQuery 객체를 만들어 줍니다.
이 함수에는 $() 함수에 사용할 수 있는 모든 선택자 표현이 올 수 있습니다. 만일 그 선택자가 주어졌고 그 선택자에 의해 선택될 수 있는 바로 다음 요소들이 있다면 jQuery 객체가 반환되고 그렇지 않다면 제외됩니다.
예를 보시죠.
<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>
item 3의 형제 요소들을 찾아볼까요.
$('li.third-item').siblings().css('background-color', 'red'); 스크립트의 결과는 items 1, 2, 4, 그리고 5 의 배경색이 바뀌게 됩니다. 선택자 표현을 포함하지 않았기 때문에 형제 요소들을 모두 선택하게 됩니다. 만일 선택자 표현을 추가하면 다음 요소를 선택하기 전에 선택자에 의한 검증을 실시하게 됩니다.
예 제
노란색 리스트의 형제들을 찾고 개수를 세어 줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
ul { float:left; margin:5px; font-size:16px; font-weight:bold; }
p { color:blue; margin:10px 20px; font-size:16px; padding:5px;
font-weight:bolder; }
.hilite { background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<ul>
<li>One</li>
<li>Two</li>
<li class="hilite">Three</li>
<li>Four</li>
</ul>
<ul>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
</ul>
<ul>
<li>Eight</li>
<li class="hilite">Nine</li>
<li>Ten</li>
<li class="hilite">Eleven</li>
</ul>
<p>Unique siblings: <b></b></p>
<script>
var len = $(".hilite").siblings()
.css("color", "red")
.length;
$("b").text(len);
</script>
</body>
</html>미리보기
노란색 리스트의 형제들을 찾아서 빨간색으로 텍스트를 변경시킵니다. 그리고 개수를 세어줍니다. 7개라고 알려주네요.
예 제
p 태그의 현제들을 찾습니다. 단, "selected"라는 클래스를 사용하는 녀석들만 해당됩니다.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div><span>Hello</span></div>
<p class="selected">Hello Again</p>
<p>And Again</p>
<script>$("p").siblings(".selected").css("background", "yellow");</script>
</body>
</html>미리보기
이 예제는 참 잘 울궈 먹는듯 합니다. ㅎㅎ;; 계속 나오네요. 항상 같은 결과가 나옵니다. 물론 스크립트는 다르죠. 여러 가지 방법이 있다는 얘기이죠. 코딩에 정답은 없습니다.
추신은 패스~~
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API 정복 - 새로운 요소 추가, appendTo() (4) | 2011.07.26 |
|---|---|
| jQuery API 정복 - 마지막 자식 요소 추가, append() (6) | 2011.07.20 |
| jQuery API 정복 - 뒤에 추가하기, after() (1) | 2011.07.14 |
| jQuery API 정복 - 범위로 자르기, slice() (0) | 2011.07.07 |
| jQuery API 정복 - 이전에 있는 것들, prevAll() (0) | 2011.07.05 |
| jQuery API 정복 - 이전 요소 찾기, prev() (0) | 2011.07.05 |
| jQuery API 정복 - 특정 조건을 만날 때까지 이전 요소들을 쭈욱, prevUntil() (0) | 2011.06.30 |
| jQuery API 정복 - 특정 부모를 찾을 때까지, parentsUntil() (0) | 2011.06.29 |