순회(탐색) 메소드 - Ancestors
선택한 요소의 상위 요소를 찾는 메소드이다.
parent() : 해당 요소의 바로 상위 요소
parents() : 해당 요소의 상위 요소들 전부
parentsUntil() : 해당 요소의 상위 요소부터 괄호 안에 입력된 요소까지
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Insert title here</title>
<style>
.wrap * {
border:1px solid lightgray;
display:block;
padding:5px;
margin:15px;
color:gray;
}
</style>
</head>
<body>
<h1>순회(탐색) 메소드</h1>
<h3>Ancestors 메소드</h3>
<p>선택된 요소의 상위 요소들을 선택할 수 있는 메소드</p>
<div class="wrap">
<div style="width:500px;">div (grand-grandParent)
<ul>ul (grandParent)
<li>li (directParent)
<span>span</span>
</li>
</ul>
</div>
<div style="width:500px;">div (grandParent)
<p>p (directParent)
<span>span</span>
</p>
</div>
</div>
<script>
$(function(){
//선택된 요소의 바로 상위 요소만 리턴
$("span").parent().css({"color":"red", "border":"2px solid red"});
//선택된 요소의 모든 상위 요소 리턴(매개변수가 있으면 매개변수와 일치하는 부모만 리턴)
$("span").parents("ul").css({"color":"blue", "border":"2px solid blue"});
$("span").parentsUntil("div").css({"color":"yellowgreen", "border":"2px solid yellow"});
});
</script>
</body>
</html>
순회(탐색) 메소드 - Descendants
선택한 요소의 하위 요소를 찾는 메소드이다.
children() : 바로 다음의 하위 객체
find() : 하위에서 괄호안의 객체를 찾는다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Insert title here</title>
<style>
.wrap * {
border:1px solid lightgray;
display:block;
padding:5px;
margin:15px;
color:gray;
}
</style>
</head>
<body>
<h1>순회(탐색) 메소드</h1>
<h3>descendants 메소드</h3>
<p>선택된 요소의 하위 요소를 선택할 수 있는 메소드</p>
<div class="wrap">
<div style="width:500px;">div (grand-grandParent)
<ul>ul (grandParent)
<li>li (directParent)
<span>span</span>
</li>
</ul>
</div>
<div style="width:500px;">div (grandParent)
<p>p (directParent)
<span>span</span>
</p>
</div>
</div>
<script>
$(function(){
// 선택된 요소의 모든 자손(바로 다음 레벨) 객체를 리턴하고
//매개변수가 있는 경우 일치하는 자손 객체를 리턴한다.
//$(".wrap").children().css({"color":"red", "border":"2px solid red"});
// 자식의 자식, 손자
//$(".wrap").children().children().css({"color":"red", "border":"2px solid red"});
// 손자 중 ul 태그만
$(".wrap").children().children("ul").css({"color":"red", "border":"2px solid red"});
$(".wrap").find("span").css({"color":"yellowgreen", "border":"2px solid yellowgreen"});
});
</script>
</body>
</html>
순회(탐색) 메소드 - sideway
siblings() : 선택 요소와 같은 레벨에 있는 요소를 리턴, 인자가 있다면 일치하는 요소만 리턴
next() : 선택 요소의 다음 요소를 리턴
nextAll() : 선택 요소의 다음 요소들을 전부 리턴
nextUntil() : 선택 요소 다음부터 괄호에 인자로 받은 태그명 까지 리턴
prev() : 선택 요소의 전 요소를 리턴
prevAll() : 선택 요소의 전 요소들을 전부 리턴
prevUntil() : 선택 요소 전부터 괄호에 인자로 받은 태그명 까지 리턴
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
.wrap, .wrap * {
display:block;
border:1px solid lightgray;
color:lightgray;
padding:5px;
margin:15px;
}
</style>
</head>
<body>
<h1>순회(탐색) 메소드</h1>
<h3>sideway 메소드</h3>
<div class="wrap">div (parent)
<p>p</p>
<span>span</span>
<h2>h2</h2>
<h3>h3</h3>
<p>p</p>
</div>
<script type="text/javascript">
$(function() {
// 선택된 요소와 같은 레벨에 있는 요소 리턴
// 인자가 있는 경우 인자와 일치하는 요소 리턴
$("h2").siblings().css({"color":"red", "border":"2px solid red"});
$("h2").siblings("p").css({"color":"orange", "border":"2px solid orange"});
// 선택된 요소의 값은 레벨의 형제들 중 선택된 요소의 다음 한 개의 요소를 리턴한다.
$("h2").next().css({"color":"blue", "border":"2px solid blue"});
// 선택된 요소의 같은 레벨 형제 중 선택된 요소 다음 모든 요소를 리턴한다.
$("h2").nextAll().css({"font-size" : "2em"});
// 선택된 요소부터 같은 레벨의 인자 범위까지의 모든 요소를 리턴
$("h2").nextUntil("p").css("border", "dashed");
// 선택된 요소부터 같은 레벨의 형제 중 요소 이전의 한 개 요소를 리턴한다.
$("h2").prev().css("background", "yellow");
// 선택된 요소부터 같은 레벨의 형제 요소 중 이전의 모든 요소를 리턴한다.
$("h2").prevAll().css({"background":"cyan", "color":"red"});
// 선택된 요소의 같은 레벨의 형제 요소들 중
// 인자로 전달된 요소 이전의 요소를 리턴
$("h2").prevUntil("p").css("border", "dotted");
})
</script>
</body>
</html>