본문 바로가기
프로그래밍/jQuery

jQuery API 정복 - 형제 요소들 찾기, siblings

by zoo10 2011. 7. 6.

.siblings()

원문 링크 http://api.jquery.com/siblings/

.siblings( [selector] )Returns : jQuery

개요 : 형제 요소들을 찾아 줍니다. 선택자를 인자로 줄 수 있습니다.

  • .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 에 있는 내용임을 밝힙니다.