jQuery를 사용한 부모 요소 선택하기

jQuery의 parent() 메서드는 선택한 요소의 부모 요소를 반환합니다. 이를 통해 요소의 부모 요소를 선택하고 조작할 수 있습니다. 이번 글에서는 parent() 메서드의 사용법과 활용 예제를 살펴보겠습니다.

예제 1: parent() 메서드의 기본 사용

$("li.item-a").parent().css("border", "2px solid red");

이 예제는 클래스가 "item-a"인 리스트 아이템의 부모 요소를 선택하고, 해당 요소의 테두리를 빨간색 실선으로 변경합니다.

예제 2: 부모 요소에 클래스 추가하기

$("li.item-a").parent().addClass("highlight");

이 예제는 클래스가 "item-a"인 리스트 아이템의 부모 요소를 선택하고, 해당 요소에 "highlight" 클래스를 추가합니다.

예제 3: 부모 요소의 자식 선택하기

$("li.item-a").parent().children("ul").css("background-color", "lightblue");

이 예제는 클래스가 "item-a"인 리스트 아이템의 부모 요소를 선택하고, 해당 요소의 자식 중에서 <ul> 요소를 선택하여 배경색을 연한 파란색으로 변경합니다.