jQuery 순회 - parents() 메서드

jQuery 루프 참조 매뉴얼

예제

각 b 요소의 모든 부모 요소를 찾습니다:

$("b").parents();

본인이 직접 시도해 보세요

정의와 사용법

parents()는 현재 일치하는 요소 집합의 각 요소의 조상 요소를 얻습니다. 선택자를 사용하여 필터링하는 것은 선택 사항입니다.

.parents()selector)
매개변수 설명
selector 문자 값, 요소를 일치시키기 위해 사용되는 선택자 표현식을 포함합니다.

상세 설명

jQuery 객체를 통해 DOM 요소 집합을 표현한 경우, .parents() 메서드는 이 요소의 조상 요소를 DOM 트리에서 검색하고, 가장 가까운 부모 요소에서부터 상승하는 순서로 맞는 요소로 구성된 새로운 jQuery 객체를 생성합니다. 요소는 가장 가까운 부모 요소에서부터 밖으로 나아가는 순서로 반환됩니다. .parents()와 .parent(); 메서드는 유사하지만, 후자는 DOM 트리를 단일 레벨로 올라가며 탐색합니다.

이 메서드는 선택자 표현식을 선택적으로 받아들이며, $() 함수에 전달하는 매개변수와 같은 유형입니다. 이 선택자를 적용하면 요소가 해당 선택자와 일치하는지 확인하여 요소를 필터링합니다.

이 기본적인 내포 목록을 가진 페이지를 생각해 보세요:

<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2">
      <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>

아이템 A에서 시작하면 그의 조상 요소를 찾을 수 있습니다:

$('li.item-a');.parents();.css('background-color', 'red');

본인이 직접 시도해 보세요

이 호출의 결과는 level-2 목록, 아이템 II 및 level-1 목록 등 요소(HTML까지 DOM 트리를 따라 올라가며)가 빨간 배경색으로 설정되었습니다. 선택자 표현식을 적용하지 않았기 때문에, 부모 요소는 자연스럽게 객체의 일부가 되었습니다. 선택자를 적용한 경우, 요소가 선택자와 일치하는지 확인한 후에 포함됩니다. 선택자 표현식을 적용하지 않았기 때문에 모든 조상 요소가 반환된 jQuery 객체의 일부가 됩니다. 선택자를 적용한 경우에는 일치하는 요소만 포함됩니다.

jQuery 루프 참조 매뉴얼