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

jQuery의 parentsUntil() 메서드는 선택한 요소의 부모 요소를 선택하는 데 사용됩니다. 하지만 parentsUntil()은 특정 선택자를 만날 때까지 부모 요소를 선택합니다. 이를 통해 특정 조건까지의 부모 요소를 쉽게 탐색할 수 있습니다. 아래는 parentsUntil() 메서드를 활용한 다양한 예제를 살펴보겠습니다.

예제 1: 기본적인 사용법

$( "li.item-a" ).parentsUntil( ".level-1" ).css( "background-color", "yellow" );

이 예제는 클래스가 "item-a"인 <li> 요소의 부모 요소 중에서 클래스가 "level-1"인 요소를 만날 때까지의 모든 부모 요소에 대해 배경색을 노란색으로 설정합니다. 따라서 "level-1" 클래스를 가진 요소까지의 부모 요소에 대한 탐색을 수행합니다.

예제 2: 특정 선택자까지 탐색

$( "span.highlight" ).parentsUntil( "div.container" ).addClass( "found" );

이 예제는 클래스가 "highlight"인 <span> 요소의 부모 요소 중에서 클래스가 "container"인 <div> 요소를 만날 때까지의 모든 부모 요소에 "found" 클래스를 추가합니다. 따라서 "container" 클래스를 가진 <div> 요소를 만날 때까지의 부모 요소에 대해 탐색합니다.

예제 3: 여러 선택자 사용

$( "li.item-c" ).parentsUntil( ".level-1, .level-2" ).addClass( "highlight" );

이 예제는 클래스가 "item-c"인 <li> 요소의 부모 요소 중에서 클래스가 "level-1"이나 "level-2"인 요소를 만날 때까지의 모든 부모 요소에 "highlight" 클래스를 추가합니다. 따라서 "level-1" 또는 "level-2" 클래스를 가진 요소를 만날 때까지의 부모 요소에 대해 탐색합니다.