Einfache Methode zur Traversal der Elternknoten mit jQuery

Durch das DOM-Baummodell kann einfach auf alle Elemente im HTML-Dokument zugegriffen werden

Beispielsweise gibt es folgende Methoden, um in Richtung der Eltern zu navigieren

1.parent()Die Methode kann das unmittelbare Elternlement des bestimmten Elements erhalten

$("span").parent();erhält das unmittelbare Elternlement des <span>-Elements

2.parents()Die Methode erhält alle Eltern des gegebenen Elements

$("span").parents();erhält alle Eltern des <span>-Elements

$("span").parents(".text");erhält das Element in der Elternkette des <span>-Elements mit der Klasse "text"

3.parentsUntil()Die Methode erhält alle Elemente zwischen zwei gegebenen Elementen

$("span").parentsUntil(".text");erhält alle Elemente zwischen dem <span>-Element und dem Element mit der Klasse "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 festen Grau;
  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">gegebenes Element</div></div></div></div>
  </div>
  <div class="container">
    <div class="ancestor2-1><div class="ancestor2-2><div class="ancestor2-3><div class="now2">gegebenes Element</div></div></div></div>
  </div>
  <div class="container">
    <div class="ancestor3-1><div class="ancestor3-2><div class="ancestor3-3><div class="now3">gegebenes Element</div></div></div></div>
  </div>
  <div class="container">
    <div class="ancestor4-1><div class="ancestor4-2><div class="ancestor4-3><div class="now4">gegebenes Element</div></div></div></div>
  </div>
</div>
</body>
</html>

Detailliertes Bild:

Diese einfache Methode zum Durchsuchen der Eltern von jQuery, die ich Ihnen alle zur Verfügung gestellt habe, hoffe ich, kann Ihnen eine Referenz bieten. Ich hoffe auch, dass alle von Ihnen unsere Anleitung unterstützen und rufen.

Grundlagenanleitung

Empfohlene Artikel