Was ist JQuery-Geschwister-Traversal?-Front-End-Fragen und Antworten-php.cn

Was ist JQuery-Geschwister-Traversal?

青灯夜游

Freigeben： 2023-03-20 10:37:55

Original

1826 Leute haben es durchsucht

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();

Was ist JQuery-Geschwister-Traversal?

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>

Nach dem Login kopieren

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

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

指定元素.siblings()

Nach dem Login kopieren

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

Nach dem Login kopieren

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!