Методы遍ения предков и предков с помощью jQuery

jQuery итерация

Сначала我们要知道什么是父亲，儿子，后代，同胞，祖先

•Элемент <div> является родителем элемента <ul>, и является предком всех содержащихся в нем элементов.

•Элемент <ul> является родителем элемента <li>,同时也是 подэлементом <div>.

•Левый элемент <li> является родителем элемента <span>, подэлементом <ul>, и потомком <div>.

•Элемент <span> является подэлементом <li>,同时也是 потомком <ul> и <div>.

•Два элемента <li> являются близнецами (имели одинакового родителя).

•Элемент правого <li> является родителем элемента <b>, подэлементом <ul>, и потомком <div>.

•Элемент является подэлементом правого <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 и посмотрим на результат

Когда i=3, то есть до третьего предка, результат body

Когда 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, не включая #div1

Вот и все, что я хочу поделиться с вами о методах遍历 родительских и предков элементов jQuery, я надеюсь, это поможет вам, и希望大家多多 поддерживать учебник крика.

Основной учебник

Рекомендуется к просмотру