1. 프로그래밍

[JQUERY] 특정 객체의 상위 요소(객체) 불러오기 (parents, closest)

가이드문구


jquery에서 특정 객체의 상위요소를 불러오는 방법을 알아보겠습니다.

parents와 closest의 메소드 정의, 상황별 사용 방법은 여기 링크를 클릭해서 참고하세요.


html 템플릿

아래와 같은 html 템플릿이 있습니다.

ul의 객체에서 부모 객체인 parent1 요소를 불러와 보겠습니다.

  1. <html>
  2. 	<body>
  3. 		<div id="parent1">
  4. 			<li id="parent2">
  5. 				<ul id="test_ul">
  6. 					parent, closest 테스트
  7. 				</ul>
  8. 			</li>
  9. 		</div>
  10. 	</body>
  11. </html>


$(selector).parents(selector)

parents 함수는 parents 인자 값으로 요청하는 모든 상위 요소를 반환합니다.

즉, selector 로 설정한 모든 상위 요소를 반환 합니다.

아래와 같이 test_ul 로 요청해 보겠습니다.

  1. $("#test_ul").parents("div");

div 여러개의 상위 요소가 있다면 결과 객체는 배열로 나옵니다.

상위 요소의 div 태그로 되어있는 요소를 모두 반환하기 때문입니다.


$(selector).closest(selector)

closest 함수는 parents 함수와 달리 가장 근접한 상위 요소 중 하나만 반환합니다.

아래와 같이 요청을 하면 가장 근접한 요소인 parent2의 li 태그 객체가 반환됩니다.

  1. $("#test_ul").closest();


jquery 사용 시 특정 상위 객체를 가져와야 하는 경우 필요한 구성에 맞게 사용하시길 바랍니다.
작성자 소개
초이 프로필
WrapUp 블로거

초이

반려견을 좋아하고, 차를 좋아하고, 여행을 좋아하고, 맛집을 찾아 즐기는 웹 개발자 입니다^^