더보기
jQuery의 탐색(순회)메소드 조상ver에 대해 알아보자
라이브러리 연결 후 진행할 것
탐색(순회) 메소드 (Traversing)
✔️ Anscestors(조상) 메소드: 기준이 되는 요소의 상위 요소들을 선택할 수 있는 메소드
👉🏻 $("선택자").parent()
선택된 요소의 바로 위 (상위, 부모) 요소 하나만을 선택
👉🏻 $("선택자").parents
선택된 요소의 모든 상위요소들을 다 선택
👉🏻 $("선택자").parents("선택자")
선택된 요소의 모든 상위요소들 중에서 제시한 값과 일치하는 상위요소들만 선택 (추가적인 조건을 제시)
👉🏻 $("선택자").parentsUntil("선택자")
선택된 요소부터 제시한 값까지의 모든 상위요소를 선택(범위를 제시하는 개념)
<head>
<style>
.wrap, .wrap * {
border : 1px solid lightgray;
display : block;
margin : 15px;
padding : 5px;
color : grey;
}
</style>
</head>
<body>
<div class="wrap"> 조상
<div>div(증조할머니)
<div>
<ul>ul(할머니)
<li>li(엄마)
<span>span</span>
</li>
</ul>
</div>
</div>
<div>div(할아버지)
<p>p(아빠)
<span>span</span>
</p>
</div>
</div>
<script>
$(function(){
// parent(): 나를 감싸고 있는 부모 하나만 선택하겠다
$("span").parent().css({color:"red", border:"2px solid red"});
// parents(): 나의 모든 조상 선택자를 선택하겠다
$("li").parents().css("color", "blue");
// parents("선택자"): 나의 모든 조상들 중에서도 지정한 선택자만 선택하겠다
$("li").parents("div").css("border", "2px dashed magenta");
// parentsUntil("선택자")
$("span").parentsUntil("div").css("color", "pink"); // span에서부터 타고 올라가다가 제시한 div를 만나기 전까지
});
</script>
</body>