[jQuery] 상위 요소 찾는 closest() 함수 사용법, 예제 (스타일 변경, 이벤트 추가)

아래 소스 코드는 closest() 함수를 사용해서 HTML 요소를 선택해 스타일을 변경하고, 이벤트를 추가하는 예시입니다.

 

closest() 함수

$(selector).closest(filter);

ㅇ $(selector): 선택자를 사용하여 원하는 요소를 선택합니다. 해당 선택자에 맞는 요소들 중에서 가장 가까운 조상 요소를 찾을 것입니다.

ㅇ .closest(filter): 선택한 요소에서 시작하여 상위로 이동하면서, 주어진 필터 조건을 만족하는 가장 가까운 조상 요소를 반환합니다. 필터가 지정되지 않으면 가장 가까운 조상 요소를 모두 선택합니다.

 

요약하면, $(selector).closest(filter); 함수는 주어진 선택자로 선택한 요소를 기준으로 상위로 올라가며 가장 가까운 조상 요소 중에서 주어진 필터 조건을 만족하는 요소를 찾아 반환합니다.

 

소스코드

클릭한 버튼을 기준으로 가장 가까운 .parent 요소를 찾아서 closestParent 변수에 저장하고, closestParent 내부에서 <p> 요소를 찾아 해당 텍스트를 가져와 parentText 변수에 저장합니다.
closestParent 요소의 인덱스를 확인하여 인덱스 값에 따라 다른 스타일을 적용합니다. 인덱스 값은 0부터 시작하며, 첫 번째 .parent 요소의 경우 0, 두 번째 .parent 요소의 경우 1이 됩니다.
또, find() 함수를 사용하여 .child 클래스를 가진 하위 요소를 찾아서 해당 내용을 변경하고, 하위에 P 태그로 text를 추가 합니다.

 

 

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
	.parent {
	  padding: 20px;
	  margin: 10px;
	  border: 1px solid #ccc;
	}
</style>
<script>
$(function() {
	$(".btn").click(function() {
		var closestParent = $(this).closest(".parent");
		var parentText = closestParent.find("p").text();
				
		// 각 부모 요소에 다른 스타일 적용
		if (closestParent.index() === 0) {
		  closestParent.css({
			"background-color": "lightblue",
			"color": "red"
		  });
		} else if (closestParent.index() === 1) {
		  closestParent.css({
			"background-color": "lightgreen",
			"color": "yellow"
		  });
		}
		closestParent.find(".child").html("<p>Clicked: " + parentText + "</p>");
		closestParent.append("<p>New content added!</p>");
	});
});
</script>
<div class="parent">
  <p>Parent 1</p>
  <div class="child">
    <button class="btn">Click 1</button>
  </div>
</div>

<div class="parent">
  <p>Parent 2</p>
  <div class="child">
    <button class="btn">Click 2</button>
  </div>
</div>

 

기본화면

 

Click 1 클릭 화면

 

Click 2 클릭 화면

 

 

참고링크

[jQuery] 하위 요소 찾는 find() 함수 사용법, 예제 (스타일 변경, 이벤트 추가)