JQuery 요소의 부모 계층과 조상 계층 탐색 방법

JQuery 순회

먼저 우리는 '부모', '아들', '후손', '형제', '조상'이 무엇인지 알아야 합니다

•<div> 요소는 <ul>의 부모 요소이며, 동시에 모든 내용의 조상입니다

•<ul> 요소는 <li>의 부모 요소이며, 동시에 <div>의 자식 요소입니다

•왼쪽 <li> 요소는 <span>의 부모 요소이며, <ul>의 자식 요소이며, 동시에 <div>의 후손입니다.

•<span> 요소는 <li>의 자식 요소이며, <ul>과 <div>의 후손입니다.

•두 개의 <li> 요소는 형제(동일한 부모를 가지고 있습니다).

•오른쪽 <li> 요소는 <b>의 부모 요소이며, <ul>의 자식 요소이며, 동시에 <div>의 후손입니다.

•<b> 요소는 오른쪽 <li>의 자식 요소이며, <ul>과 <div>의 후손입니다.

부모와 조상의 순회

1.parent()

직접적인 부모를 순회하고, 그 이상의 조상을 순회하지 않습니다

<!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(){
			$("#info").html("div4의 아버지+$("#div4").parent().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>
</div>
</body>
</html>

2.parents()

그 모든 조상을 순회합니다

.each(function(i,e){})

각 요소를 순회합니다

그 중 i는 인덱스, e는 현재 객체이며, $(this)와 동일합니다. 하지만 이는 js 객체이고, 후자는 jquery 객체입니다.

<!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(){
			$("#div4").parents().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>
</div>
</body>
</html>

그럼 당신은 물으실 거예요. 세 번째와 네 번째 조상이 무엇인가요? 웹 페이지에서 F12테스트를 해보고 결과를 확인해 보세요

when i=3 즉 세 번째 조상에 도달했습니다. 결과는 body입니다

when i=4 즉 네 번째 조상에 도달했습니다. 결과는 html입니다

3.parentsUntil()

순회하여 지정된 조상(그 조상을 포함하지 않음)

<!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(){
			$("#div4").parentsUntil("#div1").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>
</div>
</body>
</html>

따라서 범위는 #div4와 #div1중간에는 #div가 포함되지 않습니다.1

이 글은 jQuery 요소의 부모와 조상을 탐색하는 방법에 대해 소개해 드린 것입니다. 많은 도움이 되길 바랍니다. 또한, 나의 노래 튜토리얼에 많은 지원을 부탁드립니다.

기본 가이드

좋아할 것 같은 것