Método simple de jQuery para recorrer hacia los antepasados

Se puede acceder fácilmente a todos los elementos del documento html a través del árbol DOM

Por ejemplo, para acceder a los elementos de ascendencia hay los siguientes métodos

1.parent()El método puede obtener el padre directo del elemento especificado

$("span").parent(); se obtiene el padre directo del elemento <span>

2.parents()El método obtiene todos los padres del elemento dado

$("span").parents(); se obtienen todos los padres del elemento <span>

$("span").parents(".text"); se obtiene el elemento con clase "text" en el padre directo de <span>

3.parentsUntil()El método obtiene los elementos entre dos elementos dados

$("span").parentsUntil(".text"); se obtienen todos los elementos entre <span> y el elemento de clase "text"

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
 <style>
 .container
 {
  float:left;
  margin-left:30px;
 }
.container div
 {
  border:1px solid grey;
  margin:15px auto;
 }
.ancestor1-1,.ancestor2-1,.ancestor3-1,.ancestor4-1
{
  width:150px;
  height:150px;
} 
.ancestor1-2,.ancestor2-2,.ancestor3-2,.ancestor4-2
{
  width:120px;
  height:120px;
}
.ancestor1-3,.ancestor2-3,.ancestor3-3,.ancestor4-3
{
  width:90px;
  height:90px;
}
.now1,.now2,.now3,.now4
{
  width:60px;
  height:60px;
}
 </style>
 <script>
$(document).ready(function(){
$(".now1").parent().css("border-color","red");
$(".now2").parents().css("border-color","red");
$(".now3").parents(".ancestor3-2").css("border-color","red");
$(".now4").parentsUntil(".ancestor4-1").css("border-color","red");
}
);
 </script>
</head>
<body>
<div>
  <div class="container">
    <div class="ancestor1-1><div class="ancestor1-2><div class="ancestor1-3><div class="now1">elemento dado</div></div></div></div>
  </div>
  <div class="container">
    <div class="ancestor2-1><div class="ancestor2-2><div class="ancestor2-3><div class="now2">elemento dado</div></div></div></div>
  </div>
  <div class="container">
    <div class="ancestor3-1><div class="ancestor3-2><div class="ancestor3-3><div class="now3">elemento dado</div></div></div></div>
  </div>
  <div class="container">
    <div class="ancestor4-1><div class="ancestor4-2><div class="ancestor4-3><div class="now4">elemento dado</div></div></div></div>
  </div>
</div>
</body>
</html>

Imágenes de ejemplo:

La sencilla forma de recorrer los padres de jQuery que he compartido con ustedes es todo el contenido que tengo, espero que les sea útil y que todos apoyen y griten tutoriales.

Tutoriales básicos

Te gustará