jQuery 상위 요소 가져오기(parents, closest)

가끔 jQuery 사용시에 특정 상위 객체를 가져와야 하는 때가 종종 있다. 까먹지 않게 포스팅.

Example

jQuery에서 특정 상위 객체를 가져오는 방법은 여러가지가 있으니 하나씩 알아보자. 우선 예제로 쓸 HTML 페이지 구성은 아래와 같다.

<html>
	<body>
		<div id="parent2"><!-- 부모 2 -->
			<div id="parent1"><!-- 부모 1 -->
				<span id="test"></span>
			</div>
		</div>
	</body>
</html>

이제부터 이 예제 코드를 가지고 다음의 함수들을 살펴보자.

$(selector).parents(selector)

parents 함수는 parents 인자값으로 잡히는 모든 상위 요소를 반환한다. 예를들자면, 예제 HTML 코드처럼 div 태그가 중첩되어 있을때 $("#test").parents("div")를 실행하면 결과 객체는 배열이 나온다. 즉, 셀렉터selector로 잡히는 모든 상위 요소를 반환한다.

반환된 배열에는 parent1 div, parent2 div 태그가 있다. 버튼을 눌러서 어떤 값이 나오는지 확인해보자. 지금 이 버튼은 해당 포스트를 구성하는 HTML의 일부분을 가져오게 되어 있다. 그래서 parent1,2 외에 다른 div도 다수 뜨게 되어 있지만 무시하자. 여기서 중요한건 셀렉터로 잡히는 모든 상위 요소를 가져온다는 것이다. 물론 특별한 요소 ID를 입력시키면 하나만 반환이 되긴 하겠다.

$(selector).closest(selector)

closest 함수는 parents 함수와 달리 셀렉터로 잡히는 상위 요소중 가장 근접한 하나를 반환한다. $("#test").closest("div")를 실행하면 parent1 div 태그 객체가 반환된다. 버튼을 눌러서 확인해보자.