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()」メソッドは選択された要素のすべての直接子要素を返します。
    $("#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()にはselecterを追加する必要があります。それがないと表示されません。

したがって、選択子を追加する必要があります。例えば、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() メソッドは、2つの指定されたパラメータ間に位置するすべての続く同胞要素を返します。

<!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 過去要素の後裔と同士の実現方法は、編集者が皆さんに提供する全ての内容です。皆さんに参考になれば幸いですし、呐喊教程へのご支援もお願いいたします。

基礎教程