Método para recorrer los elementos del padre y los antepasados de JQuery

Recorrido de JQuery

Primero, debemos saber qué son padre, hijo, descendiente, hermano y antepasado

•<div> El elemento es el elemento padre del <ul>, al mismo tiempo es el antepasado de todo el contenido.

•<ul> El elemento es el elemento padre del <li>, al mismo tiempo es el hijo del <div>.

•El elemento <li> izquierdo es el elemento padre del <span>, el hijo de <ul>, al mismo tiempo es el descendiente del <div>.

•<span> El elemento es el hijo del <li>, al mismo tiempo es el descendiente de <ul> y <div>.

•Los dos elementos <li> son hermanos (tienen el mismo padre).

•El elemento <li> derecho es el elemento padre de <b>, el hijo de <ul>, al mismo tiempo es el descendiente del <div>.

•<b> El elemento es el hijo del <li> derecho, al mismo tiempo es el descendiente de <ul> y <div>.

recorrido de clase y antepasados

1.parent()

recorremos el padre directo, no subimos a otros antepasados

<!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 sin título</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("div4el padre+$("#div4").parent().attr("id"));
  });
});
</script>
</head>
<body>
<input type="button" value="Hacer clic" 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()

recorremos todos sus antepasados

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

recorremos cada elemento

donde i es el índice, e es el objeto actual, equivalente a $(this), pero el primero es un objeto js y el segundo es un objeto 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 sin título</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()+"el"+i+"un ancestro es,("+$(this).attr("id")+");
      });
  });
});
</script>
</head>
<body>
<input type="button" value="Hacer clic" id="btn"><div id="info"></div>
<div id="div1">
 <div id="div2">
  <div id="div3">
    <div id="div4">
  		</div>
  </div>
 </div>
</div>
</body>
</html>

Entonces, ¿qué diablos son los terceros y cuartos antepasados? Vamos a presionar F en la página web12depuramos para ver el resultado

cuando i=3 es decir, hasta el tercer antepasado, el resultado es body

cuando i=4 es decir, hasta el cuarto antepasado, el resultado es html

3.parentsUntil()

bucle hasta el antepasado especificado (no incluye al antepasado)

<!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 sin título</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()+"el"+i+"un ancestro es,("+$(this).attr("id")+");
      });
  });
});
</script>
</head>
<body>
<input type="button" value="Hacer clic" id="btn"><div id="info"></div>
<div id="div1">
 <div id="div2">
  <div id="div3">
    <div id="div4">
  		</div>
  </div>
 </div>
</div>
</body>
</html>

Por lo tanto, el rango está en #div4Y #div1No incluye #div1

La siguiente sección sobre cómo recorrer los padres y ancestros de los elementos de JQuery que comparto con todos ustedes es todo el contenido, espero que les sirva de referencia y que apoyen más a la tutorial de alarido.

Tutoriales básicos

Te gustará