상위 요소 선택자는 선택한 요소를 기준으로 모든 상위 요소를 선택하거나 상위 요소 중 선택하고자하는 요소만 선택할 때 사용한다.
기본형
$("요소 선택").parents() : 선택한 요소를 기준으로 상위 요소를 모두 선택한다.
$("요소 선택").parents("요소 선택") : 선택한 요소를 기준으로 상위 요소 중 선택한 요소만 선택한다.
예제. class 값이 txt1인 요소와 txt2인 요소의 상위 요소를 어떻게 선택하는지 살펴보자
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
$(function() {
$(".txt1").parents().css({
"border" : "2px dashed #00f"
});
$(".txt2").parents("div").css({
"border" : "2px solid #f00"
});
});
</script>
<h1 class="title">선택자</h1>
<section>
<div>
<p class="txt1">내용</p>
</div>
</section>
<section>
<div>
<p class="txt2">내용</p>
</div>
</section>
</body>
</html>결과
'제이쿼리' 카테고리의 다른 글
| .val()에 대해 (0) | 2020.10.15 |
|---|---|
| [제이쿼리] 가장 가까운 상위 요소 선택자 (0) | 2020.10.04 |
| [제이쿼리] 범위 제한 전체 형/동생 요소 선택자 (0) | 2020.10.04 |
| [제이쿼리] 전체 형제 요소 선택자 (0) | 2020.10.04 |
| [제이쿼리] 전체 형(이전) / 동생(다음) 요소 선택자 (0) | 2020.10.04 |
