JQuery遍历元素的父辈和祖先的方法

Scansione jQuery

Prima di tutto, dobbiamo sapere cosa sono padre, figlio, discendente, fratello, antenato

• L'elemento <div> è padre dell'<ul>, contemporaneamente antenato di tutti i contenuti.

• L'elemento <ul> è padre dell'elemento <li>, contemporaneamente figlio del <div>.

• L'elemento <li> di sinistra è padre del <span>, figlio di <ul> e contemporaneamente discendente del <div>.

• L'elemento <span> è figlio del <li>, contemporaneamente discendente di <ul> e <div>.

• I due elementi <li> sono fratelli (hanno lo stesso padre).

• L'elemento <li> di destra è padre dell'<b>, figlio di <ul> e contemporaneamente discendente del <div>.

• L'elemento è figlio del <li> di destra, contemporaneamente discendente di <ul> e <div>.

Scansione dei genitori e degli antenati

1.parent()

Esegui una scansione del padre diretto, non salta agli altri antenati

<!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>Documento senza titolo</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("padre di div4"+$("#div4").parent().attr("id"));
  });
});
</script>
</head>
<body>
<input type="button" value="Clicca" 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()

Esegui una scansione di tutti gli antenati

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

Esegui una scansione di ciascun elemento

Dove i è l'indice, e è l'oggetto corrente, equivalente a $(this), ma il primo è un oggetto js, mentre il secondo è un oggetto 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>Documento senza titolo</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() + "il nono antenato è, (" + $(this).attr("id") + ")");
      });
  });
});
</script>
</head>
<body>
<input type="button" value="Clicca" id="btn"><div id="info"></div>
<div id="div1">
 <div id="div2">
  <div id="div3">
    <div id="div4">
  		</div>
  </div>
 </div>
</div>
</body>
</html>

Allora potresti chiedere: quali sono quegli antenati terzo e quarto? Facciamo una debug su pagina web premendo F12 per vedere i risultati

Quando i=3, ovvero raggiunto il terzo antenato, il risultato è body

Quando i=4, ovvero raggiunto il quarto antenato, il risultato è html

3.parentsUntil()

Esegui una scansione fino alantenato specificato (escluso l'antenato stesso)

<!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>Documento senza titolo</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() + "il nono antenato è, (" + $(this).attr("id") + ")");
      });
  });
});
</script>
</head>
<body>
<input type="button" value="Clicca" id="btn"><div id="info"></div>
<div id="div1">
 <div id="div2">
  <div id="div3">
    <div id="div4">
  		</div>
  </div>
 </div>
</div>
</body>
</html>

Quindi l'intervallo è tra #div4 e #div1, non inclusivo di #div1

Questa guida su come esplorare i genitori e gli antenati degli elementi jQuery è tutto ciò che ho condiviso con voi. Spero che questo possa essere un riferimento utile e vi prego di supportare il tutorial di urlaio.

教程基础