[Jquery] 선택한 요소의 부모(상위 요소) 선택하는법

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

 

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

 

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

<table>
	<thead>
		<tr>
			<th id="soccer">축구</th>
			<th id="basket">농구</th>
			<th id="base">야구</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td id="son">손흥민</td>
			<td id="jordan">조던</td>
			<td id="ryu">류현진</td>
		</tr>
		<tr>
			<td id="messi">메시</td>
			<td id="kobe">코비</td>
			<td id="ker">커쇼</td>
		</tr>
		<tr>
			<td id="thief">강두</td>
			<td id="ha">하승진</td>
			<td id="kim">김원중</td>
		</tr>
	</tbody>
</table>
<button id="btn" class="btn btn-white btn-info btn-bold">버튼</button>

<style>
    table {
        width: 50%;
    }
 
    table, th, td {
        border: 1px solid #bcbcbc;
    }
</style>

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

부모 선택

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() 메소드와 비슷하지만, 해당 요소의 조상 요소뿐만 아니라 해당 요소 자신까지도 검사하는 점이 다릅니다.

 

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