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

jQuery API 정복 - 특정 부모를 찾을 때까지, parentsUntil()

by zoo10 2011. 6. 29.

.parentsUntil()

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

.parentsUntil( [selector,] [filter] )Returns : jQuery

개요 : 어떤 조건이 참이 될 때까지 부모 요소를 쭉 찾습니다. 선택자, DOM 노드, jQuery 객체가 일치할 경우 결과에 포함되지 않습니다.(마치 와우의 특성 설명을 보는 듯 하군하 ;;; 어설픈 직역 ㅜㅜ)

  • .parentsUntil( [selector,] [filter] )
  • selector 선택자 표현 문자열
  • filter 일치하는 것을 찾기 위한 선택자 표현 문자열
  • .parentsUntil( [element,] [filter] )
  • element 부모요소를 찾기위한 DOM node 또는 jQuery 객체 문자열 표현
  • filter 일치하는 것을 찾기 위한 선택자 표현 문자열

.parentsUntil() 함수는 특정한 조건이 참이 되기 전까지 계속 부모요소를 찾아 냅니다. 결과는 jQuery 객체가 되는데 .parentsUntil() 의 특정 조건에 참이 되는 요소는 제외됩니다.

만약 선택자가 일치하는 것이 없거나 선택자를 인자로 주지 않았다면, .parents() 함수와 동일하게 동작합니다.

jQuery 1.6에 와서, .parentsUntil() 첫번째 인자값에 선택자 대신 DOM 노드 또는 jQuery 객체를 사용할 수 있게 되었습니다..

이 함수는 두번째 인자로 선택자 표현을 추가로 넘길수 있습니다. 만약 두번째 인자(filter)를 사용한다면 요소를 선택 시 필터를 사용하여 검증하게 됩니다.

예 제  
<li class="item-a"> 부모 요소들 중 <ul class="level-1">를 찾을 때까지 배경색을 빨간색으로 바꿉니다. 또한, <li class="item-2"> 의 부모요소들중 클래스에 "yes" 가 포함된 <ul class="level-1"> 를 만날 때까지 녹색 테두리를 그립니다.

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  
<ul class="level-1 yes">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2 yes">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>
<script>
$("li.item-a").parentsUntil(".level-1")
  .css("background-color", "red");
 
$("li.item-2").parentsUntil( $("ul.level-1"), ".yes" )
  .css("border", "3px solid green");
    
</script>
 
</body>
</html>

미리보기

결과를 보시면 뭐 따로 설명드릴것이 없습니다.

 

덧붙임도 생략~~

그럼 즐프하세요.

※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.