jQuery - 조상 셀렉터

상위 요소는 다음 표를 사용할 수 있습니다.

선택자	설 명
:root	문서의 최상위 요소
:empty	비어있는 모든 요소를 선택
:parent $().parent()	선택한 요소 중에서 지정한 부모 요소를 선택 :empty 의 역입니다.
$().offsetParent()	선택한 하위 요소 중 CSS 포지션 속성을 가진 부모 요소를 선택 (position = relative, absolute또는 fixed 중 하나)
:parents()	선택한 요소의 부모 요소 모두를 선택
$().closest()	선택한 하위 요소에서 가장 가까운 상위 요소를 선택
$().parentsUntil()	선택한 하위 요소에서 지정한 부모 요소 사이의 모든 조상 요소를 선택

:parent 와 :empty 선택자

선택한 요소의 상위 요소를 선택할 수 있습니다. 대상이 :empty 이면 빨간색으로, :parent 이면 노란색으로 설정합니다.

<style>
table td{
  border: 1px solid;
}
</style>

<script>
$(function(){
  $("td:parent").css("background", "yellow");

  $("td:empty").css("background", "red");
});
</script>

<table>
 <tr>
  <td>알 수 없는 브라우저</td>
  <td></td>
 </tr>
 <tr>
  <td></td>
  <td>크롬</td>
 </tr>
 <tr>
  <td>사파리</td>
  <td></td>
 </tr>
</table>

다음은 $().parent() 에 대한 예제입니다. <aa> 자손요소의 부모요소가 <div> 인 요소를 찾습니다.

<script>
$(function(){
 $("aa").parent("div").css("background", "yellow");
});
</script>

<div>
  <div>알 수 없는 브라우저</div>
  <div>사파리</div>
  <div><aa>크롬</aa></div>
  <div><qq>엣지</qq></div>
  <div>파이어폭스</div>
  <div>익스플러어</div>
  <div>기타</div>
</div>

$().offsetParent()

선택한 하위 요소 중에서 CSS 포지션 속성을 가진 부모 요소를 선택합니다.

<style>
#use-nth {
  border: 1px solid;
  width: 200px;
  padding: 10px;
}
</style>

<script>
$(function(){
 $("li.google").offsetParent().css("background", "yellow");
});
</script>

<div id="use-nth">
  <div>알 수 없는 브라우저</div>
  <div>사파리</div>
  <div style="position: relative">
    크롬
    <ul>
      <li class="google">구글</li>
      <li>검색</li>
    </ul>
  </div>
  <div>엣지</div>
  <div>파이어폭스</div>
  <div>익스플러어</div>
  <div>기타</div>
</div>

$().closest()

선택한 요소에서 가장 가까운 상위 요소를 선택합니다.

<style>
#use-nth {
  border: 1px solid;
  width: 200px;
  padding: 10px;
}
</style>

<script>
$(function(){
 $("p").closest("div").css("border", "1px solid");
});
</script>

<div id="use-nth">
  <div> level-1
    <div> &nbsp; level-2
      <div> &nbsp; &nbsp; level-3
        <p> &nbsp; &nbsp; &nbsp; level-4
        </p>
      </div>
    </div>
  </div>
</div>

$().parentsUntil()

선택한 하위 요소에서 지정한 부모 요소 사이의 모든 요소를 선택합니다.

예를 들어 "클래스4" 와 "클래스1" 사이의 요소는 "클래스2", "클래스3" 이기 때문에 해당 요소의 테두리만 설정되었습니다.

<style>
#use-nth {
  border: 1px solid;
  width: 200px;
  padding: 10px;
}
</style>

<script>
$(function(){
 $(".4").parentsUntil(".1").css("border", "1px solid");
});
</script>

<div id="use-nth">
  <div class="1"> level-1
    <div class="2"> &nbsp; level-2
      <div class="3"> &nbsp; &nbsp; level-3
        <div class="4"> &nbsp; &nbsp; &nbsp; level-4
        </div>
      </div>
    </div>
  </div>
</div>