더보기
jQuery의 탐색(순회)메소드 자손ver 알아보자
라이브러리 연결 후 진행할 것
탐색(순회) 메소드 (Traversing)
✔️ Descendants (자손) 메소드 : 기준이 되는 요소의 하위 요소들을 선택할 수 있는 메소드
👉🏻 $("선택자").children()
선택된 요소의 모든 자손(바로 하위) 요소들을 선택
👉🏻 $("선택자").children("선택자")
선택된 요소의 모든 자손 요소들 중에서 제시한 값과 일치하는 요소들만 선택
👉🏻 $("선택자").find("선택자")
선택된 요소의 모든 후손 요소들 중에서 제시한 값과 일치하는 요소들만 선택
<head>
<style>
.wrap, .wrap * {
border : 1px solid lightgray;
display : block;
margin : 15px;
padding : 5px;
color : grey;
}
</style>
</head>
<body>
<div class="wrap"> 조상
<div>div(증조할머니)
<ul>ul(할머니)
<li>li(엄마)
<span>span</span>
</li>
</ul>
</div>
<div>div(할아버지)
<p>p(아빠)
<span>span</span>
</p>
</div>
</div>
<script>
$(function() {
// 앞으로 부여할 스타일 객체를 미리 정의
var style1 = {color:"red", border:"2px solid red"};
var style2 = {color:"blue", border:"2px solid blue"};
var style3 = {color:"green", border:"2px solid green"};
var style4 = {color:"orange", border:"2px solid orange"};
var style5 = {color:"purple", border:"2px solid purple"};
// children()
$(".wrap").children().css(style1);
$(".wrap").children().children().css(style2); // == ul 할머니, p 아빠, .wrap의 자손의 자손
// children("선택자")
$(".wrap").children().children("ul").css(style3); // .wrap의 자손의 자손 중 ul에 대해서 속성 부여
// find("선택자")
$(".wrap").find("li").css(style4); // .wrap의 모든 후손들 중에서 li만 선택
$(".wrap").find("span").css(style5); // .wrap의 모든 후손들 중 span만 선택
});
</script>
</body>