Method to traverse descendants and siblings of elements in JQuery

1.traverse descendants

children()

The `children()` method returns all direct child elements of the selected element.

<!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>Untitled Document</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(){
			$("#div1function(i, e) {
    $("#info").html($("#info").html())+"the"+i+A direct descendant is, ("+$(this).attr("id")+");
   });
 });
});
</script>
</head>
<body>
<input type="button" value="Click" 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()

The find() method returns the descendant elements of the selected elements, going down all the way to the last descendant.

A selector must be added inside find() if not, it will not be displayed

Therefore, a selector must be added inside, for example 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>Untitled Document</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())+"the"+i+A descendant is, ("+$(this).attr("id")+");
   });
 });
});
</script>
</head>
<body>
<input type="button" value="Click" 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.traverse siblings

siblings()

The siblings() method returns all sibling elements of the selected elements.

<!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>Untitled Document</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())+"the"+i+A sibling is, ("+$(this).attr("id")+");
   });
 });
});
</script>
</head>
<body>
<input type="button" value="Click" 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()

The next() method returns the next sibling element of the selected element

<!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>Untitled Document</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())+"the"+i+A sibling is, ("+$(this).attr("id")+");
   });
 });
});
</script>
</head>
<body>
<input type="button" value="Click" 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()

The nextAll() method returns all following sibling elements of the selected elements.

<!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>Untitled Document</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())+"the"+i+A sibling is, ("+$(this).attr("id")+");
   });
 });
});
</script>
</head>
<body>
<input type="button" value="Click" 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()

The nextUntil() method returns all following sibling elements between two given parameters.

<!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>Untitled Document</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())+"the"+i+A sibling is, ("+$(this).attr("id")+");
   });
 });
});
</script>
</head>
<body>
<input type="button" value="Click" 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=previous

Therefore, the traversal is the preceding sibling of the specified element, which is similar to the effect of next(). No examples will be given.

3.filter

first()

The first() method returns the first element of the selected elements.

<!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>Untitled Document</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="Click" 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()

The last() method returns the last element of the selected elements.

<!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>Untitled Document</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="Click" 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()

The eq() method returns the element with the specified index in the selected elements.

<!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>Untitled Document</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="Click" 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()

The filter() method allows you to specify a standard. Elements that do not match this standard will be removed from the set, and matching elements will be returned.

<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()

The not() method returns all elements that do not match the standard.

The not() method is the opposite of 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>Untitled Document</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="Click" 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>

This article about the implementation of the jQuery traversal of descendants and siblings is all the content that the editor shares with everyone. I hope it can give everyone a reference and I hope everyone will support and cheer for the tutorial.

Basic Tutorial