Method for jQuery to Traverse Parent Elements and Ancestors

Firstly, we need to know what is the father, son, descendant, sibling, and ancestor

;The <div> element is the parent element of <ul>, and is the ancestor of all its contents.

Parent class and ancestor traversal8226;The <ul> element is the parent element of the <li> element, and is also the child element of <div>.

Parent class and ancestor traversal8226;The left <li> element is the parent element of <span>, the child element of <ul>, and also a descendant of <div>.

Parent class and ancestor traversal8226;The <span> element is the child element of <li>, and is also a descendant of <ul> and <div>.

Parent class and ancestor traversal8226;The two <li> elements are siblings (having the same parent element).

Parent class and ancestor traversal8226;The right <li> element is the parent element of <b>, the child element of <ul>, and also a descendant of <div>.

Parent class and ancestor traversal8226<b> Element is the child element of the right <li>, and is also a descendant of <ul> and <div>.

Parent class and ancestor traversal8226.parent()

Traverse the direct father and do not traverse other ancestors

1$("#info").html("div

The father

DTD XHTML-//.0 Transitional3C//http: 1""//EN//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(){
			").parent().attr("id"));4.parents()+$("#div4Traverse all its ancestors
  });
});
</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>
</div>
</body>
</html>

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

Traverse each element in it

Among which i is the index, e is the current object, which is equivalent to $(this), but the former is a js object, and the latter is a jquery object.

").parents().each(function(i, e) {

You may ask, what are the third and fourth ancestors? Let's press F

DTD XHTML-//.0 Transitional3C//http: 1""//EN//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(){
			$("#div4Let's debug and see the result
        $("#info").html($("#info").html()+The+i+A grandparent 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>
</div>
</body>
</html>

That is, we have reached the third ancestor, the result is body12When i=

.parentsUntil()3 That is, we have reached the fourth ancestor, the result is html

.parentsUntil()4 Traverse to the specified ancestor (excluding the ancestor itself)

3<!DOCTYPE html PUBLIC "

DTD XHTML-//.0 Transitional3C//http: 1""//EN//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(){
			$("#div4").parentsUntil("#div1").each(function(i, e) {
        $("#info").html($("#info").html()+The+i+A grandparent 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>
</div>
</body>
</html>

So the range is in #div4And #div1Does not include #div1

This is the complete content of the method to traverse the parent and ancestor elements of JQuery shared by the editor, hoping to provide a reference for everyone, and also hope everyone will support the Yell Tutorial.

Basic Tutorial