jQuery의 parents() 메서드를 활용한 DOM 탐색 예제

jQuery의 parents() 메서드는 선택한 요소의 모든 부모 요소를 선택하는 데 사용됩니다. 이를 통해 DOM 구조를 따라 부모 요소를 탐색할 수 있습니다. 아래는 parents() 메서드를 활용한 다양한 예제를 살펴보겠습니다.

예제 1: 기본적인 사용법

$( "li.item-a" ).parents().css( "background-color", "yellow" );

이 예제는 클래스가 "item-a"인 <li> 요소의 모든 부모 요소에 대해 배경색을 노란색으로 설정합니다. 여기서 parents() 메서드는 선택한 요소의 모든 부모 요소를 반환하며, 그에 따라 배경색이 변경됩니다.

예제 2: 특정 부모 요소 지정

$( "li.item-b" ).parents( "ul" ).css( "border", "2px solid red" );

이 예제는 클래스가 "item-b"인 <li> 요소의 부모 중 <ul> 요소에 대해 테두리를 빨간색 실선으로 설정합니다. 여기서 parents("ul")는 <ul> 요소의 부모 중에서만 선택하도록 지정합니다.

예제 3: 여러 부모 요소 선택

$( "span.highlight" ).parents( "div, p" ).addClass( "found" );

이 예제는 클래스가 "highlight"인 <span> 요소의 부모 중 <div> 또는 <p> 요소에 "found" 클래스를 추가합니다. parents("div, p")를 사용하여 여러 부모 요소를 선택할 수 있습니다.