Jquery 부모요소 - jquery bumoyoso

반응형

JQuery Closest(), Parent(), Parents()

마우스 클릭 이벤트와 같은 이벤트를 발생시킬 때 상위 태그나 요소를 찾을 일이 종종 발생한다.

이때 사용할 수 있는 jquery 함수는 3가지가 있다. 이 세가지는 아주 흔히 사용되는 함수로 반드시 기억해 둔다.

.closest()  // .closest("div") 와 같이 사용하여 원하는 특정 요소만 찾을 수 있음.

.parent()   // 바로 상위 요소 하나를 찾아줌.

.parents()  // 상위 모든 요소를 반환함.

예제로 살펴보면 아래와 같다.

<div class="top">

  <div class="bottom">

    <a href="#none" id="clickButton">Find parent element</a>

  </div>

</div>

페이지에 clickButton 이라는 id를 가진 a태그를 클릭 했다고 가정했을 때,

아래 주석처럼 각각의 결과물을 확인할 수 있다.

.closest() 

var tmp = $(this).closest("div");

// tmp에는 클래스 명 "bottom"이 저장된다.

.parent() 

var tmp = $(this).parent("div");

// tmp에는 "bottom"이라는 class의 div가 저장된다.

.parents()

var tmp = $(this).parents("div");

// tmp에는 "bottom"이라는 class와 "top"이라는 클래스의 div가 모두 저장된다.

각각 함수의 속도차를 비교해 보면 closest 함수가 좀 더 빠르다.

속도에 민감한 서비스는 이런 부분도 신경 쓰면 좋을듯?ㅎ

.closest()는 현재 위치에서 상위 요소로

.parent() 는 상위에서 하위로 찾는 방식이다.

결국 동작하는 원리가 서로 달라서 속도 차이가 발생하는 것 같다.

관련 자료: 

www.sitepoint.com/jquerys-closest-parents/

반응형

공유하기

게시글 관리

저작자표시 비영리

• 카카오스토리
• 트위터
• 페이스북

'[개발] Programming > JQuery' 카테고리의 다른 글

안녕하세요! 오늘은 JQuery를 이용한 요소 선택법에 대해 알아보겠습니다.

먼저 요소 선택을 할 샘플 테이블을 하나 만들어 보겠습니다.

굳이 테이블이 아니더라도 부모자식형제간의 관계가 있는 html코드면 무엇이든 가능합니다.

	

		

			
축구
			
농구
			
야구
		
	
	

		

			
손흥민
			
조던
			
류현진
		
		

			
메시
			
코비
			
커쇼
		
		

			
강두
			
하승진
			
김원중
		
	

버튼

테이블과 이벤트를 적용시킬 버튼을 하나 만들어 주었습니다.

부모 선택

1) .parent()

$(function () {
        $("#btn").on("click", function () {
            $("#thief").parent().css({ "background-color": "red" }); 
        });
    });

위의 스크립트를 작성해 주고 버튼을 누르면 thief라는 아이디를 가진 요소, 바로 상위tr의 css가 바뀌게 됩니다.

2) .parents()

$("#btn").on("click", function () {
            $("#thief").parents().css({ "background-color": "red" });
        });

위 함수는 해당 요소의 모든 부모를 다 가져오는 것입니다.

그러니까 부모의 부모, 부모의 부모의 부모... 이렇게 다 가져오기 때문에 잘 쓰이지 않는다고 보시면 됩니다.

이런식으로 최상위 요소까지 피범벅이 되는 대참사를 맞이할 수 있습니다.

3) .parentsUntil()

 $("#btn").on("click", function () {
            $("#son").parentsUntil("table").css({ "background-color": "red" });
        });

위 함수는 선택한 요소의 부모 요소 중 함수에 선언한 선택자에 해당하는 요소 바로 전의 요소를 모두 선택합니다.

이때 선택자를 매개변수로 전달하지 않는다면 .parent() 메소드와 같이 모두가 피범벅이 되는 대참사를 맞이합니다.

4) .closest()

$("#btn").on("click", function () {
            $("#son").closest("tbody").css({ "background-color": "red" });
        });

위 함수는 자신을 포함한 부모 요소 중 전달받은 선택자에 해당하는 요소의 집합에서 가장 첫 번째 요소를 선택합니다.

이 메소드가 요소의 집합을 구하는 방식은 .parents() 메소드와 비슷하지만, 해당 요소의 조상 요소뿐만 아니라 해당 요소 자신까지도 검사하는 점이 다릅니다.

여기까지 제이쿼리에서 해당 요소의 부모요소를 선택하는 법을 알아보았습니다.