JQuery를 사용하여 요소의 자식과 형제를 순회하는 방법

1.하위 요소를 순회

children()

children() 메서드는 선택된 요소의 모든 직접 자식 요소를 반환합니다。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>제목 없는 문서</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
	$("#btn").click(function(){
			$("#div1.children().each(function(i, e) {
    $("#info").html($("#info").html())+개는,+i+개 직접 자손은,("+$(this).attr("id")+")");
   });
 });
});
</script>
</head>
<body>
<input type="button" value="클릭" id="btn"><div id="info"></div>
<div id="div1">
 <div id="div2">
 <div id="div3">
  <div id="div4">
 		</div>
 </div>
 </div>
 <p id="p1></p>
 <p id="p2></p>
 <span id="span1></span>
 <span id="span2></span>
 <p id="p3></p>
</div>
</body>
</html>

find()

find() 메서드는 선택된 요소의 자손 요소를 반환합니다. 마지막 자손까지 모두 포함합니다.

find()에 선택자를 추가해야 합니다. 추가하지 않으면 표시되지 않습니다.

따라서 선택자를 추가해야 합니다. 예를 들어 find("*) find("span")

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>제목 없는 문서</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
	$("#btn").click(function(){
			$("#div1").find("*").each(function(i, e) {
    $("#info").html($("#info").html())+개는,+i+개 자손은,("+$(this).attr("id")+")");
   });
 });
});
</script>
</head>
<body>
<input type="button" value="클릭" id="btn"><div id="info"></div>
<div id="div1">
 <div id="div2">
 <div id="div3">
  <div id="div4">
 		</div>
 </div>
 </div>
 <p id="p1></p>
 <p id="p2></p>
 <span id="span1></span>
 <span id="span2></span>
 <p id="p3></p>
</div>
</body>
</html>

2.동반자 순회

siblings()

siblings() 메서드는 선택된 요소의 모든 동반자 요소를 반환합니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>제목 없는 문서</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
	$("#btn").click(function(){
			$("#div2).siblings().each(function(i, e) {
    $("#info").html($("#info").html())+개는,+i+개 동반자는,("+$(this).attr("id")+")");
   });
 });
});
</script>
</head>
<body>
<input type="button" value="클릭" id="btn"><div id="info"></div>
<div id="div1">
 <div id="div2">
 <div id="div3">
  <div id="div4">
 		</div>
 </div>
 </div>
 <p id="p1></p>
 <p id="p2></p>
 <span id="span1></span>
 <span id="span2></span>
 <p id="p3></p>
</div>
</body>
</html>

next()

next()는 선택된 요소의 다음 동반자 요소입니다

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>제목 없는 문서</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
	$("#btn").click(function(){
			$("#p2).next().each(function(i, e) {
    $("#info").html($("#info").html())+개는,+i+개 동반자는,("+$(this).attr("id")+")");
   });
 });
});
</script>
</head>
<body>
<input type="button" value="클릭" id="btn"><div id="info"></div>
<div id="div1">
 <div id="div2">
 <div id="div3">
  <div id="div4">
 		</div>
 </div>
 </div>
 <p id="p1></p>
 <p id="p2></p>
 <span id="span1></span>
 <span id="span2></span>
 <p id="p3></p>
</div>
</body>
</html>

nextAll()

nextAll() 메서드는 선택된 요소의 모든 이어지는 동반자 요소를 반환합니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>제목 없는 문서</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
	$("#btn").click(function(){
			$("#p2).nextAll().each(function(i, e) {
    $("#info").html($("#info").html())+개는,+i+개 동반자는,("+$(this).attr("id")+")");
   });
 });
});
</script>
</head>
<body>
<input type="button" value="클릭" id="btn"><div id="info"></div>
<div id="div1">
 <div id="div2">
 <div id="div3">
  <div id="div4">
 		</div>
 </div>
 </div>
 <p id="p1></p>
 <p id="p2></p>
 <span id="span1></span>
 <span id="span2></span>
 <p id="p3></p>
</div>
</body>
</html>

nextUntil()

nextUntil() 메서드는 두 가지 지정된 매개변수 사이의 모든 이어지는 동반자 요소를 반환합니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>제목 없는 문서</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
	$("#btn").click(function(){
			$("#p2).nextUntil("#p3").each(function(i, e) {
    $("#info").html($("#info").html())+개는,+i+개 동반자는,("+$(this).attr("id")+")");
   });
 });
});
</script>
</head>
<body>
<input type="button" value="클릭" id="btn"><div id="info"></div>
<div id="div1">
 <div id="div2">
 <div id="div3">
  <div id="div4">
 		</div>
 </div>
 </div>
 <p id="p1></p>
 <p id="p2></p>
 <span id="span1></span>
 <span id="span2></span>
 <p id="p3></p>
</div>
</body>
</html>

prev()

prev()
prevAll()
prevUntil()
prev=previous=앞의

따라서 지정된 요소의 직전 동반자를 순회합니다. 이 효과는 next()와 유사하므로 예제를 드리지 않습니다.

3.필터

first()

first() 메서드는 선택된 요소의 첫 번째 요소를 반환합니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>제목 없는 문서</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
	$("#btn").click(function(){
			$("div p").first().each(function(i, e) {
    $("#info").html($("#info").html())+"("+$(this).attr("id")+")");
   });
 });
});
</script>
</head>
<body>
<input type="button" value="클릭" id="btn"><div id="info"></div>
<div id="div1">
 <div id="div2">
 <div id="div3">
  <div id="div4">
 		</div>
 </div>
 </div>
 <p id="p1></p>
 <p id="p2></p>
 <span id="span1></span>
 <span id="span2></span>
 <p id="p3></p>
</div>
</body>
</html>

last()

last() 메서드는 선택된 요소의 마지막 요소를 반환합니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>제목 없는 문서</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
	$("#btn").click(function(){
			$("div p").last().each(function(i, e) {
    $("#info").html($("#info").html())+"("+$(this).attr("id")+")");
   });
 });
});
</script>
</head>
<body>
<input type="button" value="클릭" id="btn"><div id="info"></div>
<div id="div1">
 <div id="div2">
 <div id="div3">
  <div id="div4">
 		</div>
 </div>
 </div>
 <p id="p1></p>
 <p id="p2></p>
 <span id="span1></span>
 <span id="span2></span>
 <p id="p3></p>
</div>
</body>
</html>

eq()

eq() 메서드는 지정된 인덱스 번호를 가진 선택된 요소를 반환합니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>제목 없는 문서</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
	$("#btn").click(function(){
			$("div p").eq(1).each(function(i, e) {
    $("#info").html($("#info").html())+"("+$(this).attr("id")+")");
   });
 });
});
</script>
</head>
<body>
<input type="button" value="클릭" id="btn"><div id="info"></div>
<div id="div1">
 <div id="div2">
 <div id="div3">
  <div id="div4">
 		</div>
 </div>
 </div>
 <p id="p1></p>
 <p id="p2></p>
 <span id="span1></span>
 <span id="span2></span>
 <p id="p3></p>
</div>
</body>
</html>

filter()

filter() 메서드는 규정한 표준에 맞지 않는 요소를 컬렉션에서 제거하고, 맞는 요소를 반환합니다.

<script type="text/javascript">
$(function(){
	$("#btn").click(function(){
			$("div p").filter("#p2").each(function(i, e) {
    $("#info").html($("#info").html())+"("+$(this).attr("id")+")");
   });
 });
});
</script>

not()

not() 메서드는 표준에 맞지 않는 모든 요소를 반환합니다.

not() 메서드는 filter()와 반대입니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>제목 없는 문서</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
	$("#btn").click(function(){
			$("div p").not("#p2").each(function(i, e) {
    $("#info").html($("#info").html())+"("+$(this).attr("id")+")");
   });
 });
});
</script>
</head>
<body>
<input type="button" value="클릭" id="btn"><div id="info"></div>
<div id="div1">
 <div id="div2">
 <div id="div3">
  <div id="div4">
 		</div>
 </div>
 </div>
 <p id="p1></p>
 <p id="p2></p>
 <span id="span1></span>
 <span id="span2></span>
 <p id="p3></p>
</div>
</body>
</html>

이번 jQuery 요소의 자식과 형제 구현 방법에 대한 이 글은 저의 모든 내용을 공유하는 것이며, 많은 참고를 바랍니다. 또한, 많은 지지와 외침 교본을 바랍니다.

기본 강의