Heim > Artikel > Web-Frontend > Was ist JQuery-Geschwister-Traversal?

Was ist JQuery-Geschwister-Traversal?

青灯夜游Original: 2023-03-20 10:37:551762Durchsuche

Geschwister haben das gleiche übergeordnete Element. Bei der Geschwisterdurchquerung von jQuery wird der DOM-Baum mit jQuery durchsucht, um die Geschwisterelemente des angegebenen Elements zu erhalten. Es gibt 7 Geschwister-Traversal-Methoden: 1. siblings(), die alle Elemente derselben Ebene des angegebenen Elements abrufen kann; 2. next(), die das nächste Geschwisterelement des Elements abrufen kann; 4. nextUntil(); 5. prev(), das die übergeordneten Geschwisterelemente des Elements erhalten kann; 6. prevAll();

Die Betriebsumgebung dieses Tutorials: Windows7-System, JQuery3.6-Version, Dell G3-Computer.

Geschwisterdurchquerung in jquery

Geschwister haben das gleiche übergeordnete Element.

Sie können die Geschwisterelemente eines Elements im DOM-Baum über jQuery durchlaufen.

Sibling-Traversal-Methode

In jquery gibt es im Allgemeinen sieben Methoden zum Abfragen von Geschwisterelementen: siblings(), next(), nextAll(), nextUntil(), prev(), prevAll(), prevUntil()

siblings()-Methode, die hauptsächlich zum Abrufen aller Geschwisterelemente des angegebenen Elements verwendet wird
next()-Methode, die hauptsächlich zum Abrufen des nächsten Geschwisterelements des angegebenen Elements verwendet wird
nextAll()-Methode, Wird hauptsächlich verwendet, um alle Elemente des nächsten Geschwisterelements des angegebenen Elements abzurufen.
nextUntil()-Methode wird hauptsächlich verwendet, um das nächste Geschwisterelement des angegebenen Elements abzurufen. Dieses Geschwisterelement muss zwischen dem angegebenen Element und dem von festgelegten Element liegen Die Methode nextUntil() wird hauptsächlich zum Abrufen der Geschwisterelemente der oberen Ebene des angegebenen Elements verwendet. Die Methode prevAll() wird hauptsächlich zum Abrufen aller Geschwisterelemente des angegebenen Elements verwendet Die obere Ebene des angegebenen Elements wird hauptsächlich verwendet, um das vorherige Geschwisterelement des angegebenen Elements zu erhalten. Dieses Geschwisterelement muss das Element zwischen dem angegebenen Element und dem durch die Methode prevUntil() festgelegten Element sein

Wir simulieren diese Prozesse durch den folgenden Code. Tatsächlich handhabt jQuery dies auf diese Weise, die Struktur und Filterung ist jedoch strenger.

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <script src="http://img.mukewang.com/down/540812440001e40e00000000.js" type="text/javascript"></script>
  <script src="js/jquery-3.6.3.min.js"></script>
  <title></title>
</head>
<body>

<button id="test1">jQuery遍历同胞</button>
<button id="test2">模拟遍历同胞</button>

<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>



<script type="text/javascript">


  function dir(elem, dir, until) {
    var matched = [],
      truncate = until !== undefined;
    while ((elem = elem[dir]) && elem.nodeType !== 9) {
      if (elem.nodeType === 1) {
        if (truncate) {
          if (elem.nodeName.toLowerCase() == until || elem.className == until ) {//细节：元素的className不止一个；
            // 添加过滤id？
            break;
          }
        }
        matched.push(elem);
      }
    }
    return matched;
  }


  function nextAll(elem) {
    return dir(elem, "nextSibling");
  }

  function prevAll(elem) {
    return dir(elem, "previousSibling");
  }

  function nextUntil(elem, until) {
    return dir(elem, "nextSibling", until);
  }

  function prevUntil(elem, until) {
    return dir(elem, "previousSibling", until);
  }


  $("#test1").click(function(){
    var item = $(&#39;li.item-ii&#39;);
    alert(item.nextAll()[0].className)
    alert(item.prevAll()[0].className)
    alert(item.nextUntil(&#39;.end&#39;)[0].className)
    alert(item.prevUntil(&#39;.first&#39;)[0].className)
  })

  $("#test2").click(function(){
    var item = document.querySelectorAll(&#39;li.item-ii&#39;)[0]
    alert(nextAll(item)[0].className)
    alert(prevAll(item)[0].className)
    alert(nextUntil(item, &#39;.end&#39;)[0].className)//.end表示是同胞的最后一个元素？
    alert(prevUntil(item, &#39;.first&#39;)[0].className)
  })



</script>

</body>
</html>

Wie erkennt jquery, ob Geschwisterelemente vorhanden sind?
Überprüfungsmethode:

1. Verwenden Sie siblings(), um alle Geschwisterelemente des angegebenen Elements abzurufen.

指定元素.siblings()

gibt ein Jquery-Objekt zurück enthält Geschwisterelemente.

2. Verwenden Sie das Längenattribut, um die Länge des JQuery-Objekts zu erhalten.

Die durch das Längenattribut erhaltene Länge ist die Anzahl der Geschwisterelemente.

jquery对象.length==0

Wenn die Anzahl der Geschwisterelemente 0 ist, d. h. Es gibt keine Geschwisterelemente.

Wenn die Zahl ungleich 0 ist, gibt es Geschwisterelemente Video]

Das obige ist der detaillierte Inhalt vonWas ist JQuery-Geschwister-Traversal?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Web3.0 kommt, ist es Front-End-freundlich?Nächster Artikel：Web3.0 kommt, ist es Front-End-freundlich?

In Verbindung stehende Artikel

Mehr sehen