Eine kurze Diskussion über die Traversal-Funktion in jQuery

Dieser Artikel stellt Ihnen die Traversal-Funktion in jQuery vor. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Empfohlenes Tutorial: jq-Tutorial

jQuery-Traversal-Funktion

jQuery-Traversal-Funktion enthält Methoden zum Filtern, Suchen und Verketten von Elementen.

Funktion	Beschreibung
.add()	Fügt ein Element zu einer Sammlung übereinstimmender Elemente hinzu.
.andSelf()	Fügt den vorherigen Satz von Elementen im Stapel zum aktuellen Satz hinzu.
.children()	Alle untergeordneten Elemente jedes Elements im Satz übereinstimmender Elemente abrufen.
.closest()	Beginnen Sie mit dem Element selbst, passen Sie es Schritt für Schritt an die übergeordneten Elemente an und geben Sie das erste übereinstimmende Vorgängerelement zurück.
.contents()	Rufen Sie die untergeordneten Elemente jedes Elements im Satz übereinstimmender Elemente ab, einschließlich Text- und Kommentarknoten.
.each()	Durchläuft das jQuery-Objekt und führt für jedes übereinstimmende Element eine Funktion aus.
.end()	beendet den letzten Filtervorgang in der aktuellen Kette und setzt den Satz übereinstimmender Elemente in den vorherigen Zustand zurück.
.eq()	Reduziert den Satz übereinstimmender Elemente auf ein neues Element am angegebenen Index.
.filter()	Reduziert die Menge der passenden Elemente auf neue Elemente, die dem Rückgabewert des Selektors oder der passenden Funktion entsprechen.
.find()	Ruft die Nachkommen jedes Elements im aktuell übereinstimmenden Elementsatz ab, gefiltert durch den Selektor.
.first()	Reduziert den Satz übereinstimmender Elemente auf das erste Element im Satz.
.has()	Reduziert die Menge der übereinstimmenden Elemente auf eine Menge, die die Nachkommen eines bestimmten Elements enthält.
.is()	Überprüft den aktuellen Satz übereinstimmender Elemente basierend auf dem Selektor und gibt true zurück, wenn mindestens ein übereinstimmendes Element vorhanden ist.
.last()	Reduziert den Satz übereinstimmender Elemente auf das letzte Element im Satz.
.map()	übergibt jedes Element im aktuellen Matching-Set an die Funktion und erzeugt ein neues jQuery-Objekt, das den Rückgabewert enthält.
.next()	Erhalten Sie die Geschwisterelemente, die unmittelbar an jedes Element im passenden Elementsatz angrenzen.
.nextAll()	Ruft alle Geschwisterelemente nach jedem Element im passenden Elementsatz ab, gefiltert durch den Selektor (optional).
.nextUntil()	Ruft alle Geschwisterelemente nach jedem Element ab, bis ein Element gefunden wird, das mit dem Selektor übereinstimmt.
.not()	Entferne Elemente aus dem Satz übereinstimmender Elemente.
.offsetParent()	Erhalten Sie das erste übergeordnete Element zur Positionierung.
.parent()	Erhalten Sie das übergeordnete Element jedes Elements im aktuellen Satz übereinstimmender Elemente, gefiltert durch den Selektor (optional).
.parents()	Rufen Sie die Vorgängerelemente jedes Elements im aktuellen Satz übereinstimmender Elemente ab, gefiltert durch den Selektor (optional).
.parentsUntil()	Ruft die Vorgängerelemente jedes Elements im aktuellen Satz übereinstimmender Elemente ab, bis ein Element gefunden wird, das mit dem Selektor übereinstimmt.
.prev()	Erhalten Sie das unmittelbar vorhergehende Geschwisterelement jedes Elements im übereinstimmenden Elementsatz, gefiltert durch den Selektor (optional).
.prevAll()	Ruft alle Geschwisterelemente vor jedem Element im passenden Elementsatz ab, gefiltert durch den Selektor (optional).
.prevUntil()	Ruft alle Geschwisterelemente vor jedem Element ab, bis ein Element gefunden wird, das mit dem Selektor übereinstimmt.
.siblings()	Erhalten Sie die Geschwisterelemente aller Elemente im passenden Elementsatz, gefiltert durch den Selektor (optional).
.slice()	Reduziert die Menge der übereinstimmenden Elemente auf eine Teilmenge des angegebenen Bereichs.

Verwendung von jedem

1. jedes im Array

复制代码

 var arr = [ "one", "two", "three", "four"];     
 $.each(arr, function(){     
    alert(this);     
 });   
//上面这个each输出的结果分别为：one,two,three,four    
    
var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]     
$.each(arr1, function(i, item){     
   alert(item[0]);     
});     
//其实arr1为一个二维数组，item相当于取每一个一维数组，   
//item[0]相对于取每一个一维数组里的第一个值   
//所以上面这个each输出分别为：1   4   7     
  
  
var obj = { one:1, two:2, three:3, four:4};     
$.each(obj, function(i) {     
    alert(obj[i]);           
});   
//这个each就有更厉害了，能循环每一个属性     
//输出结果为：1   2  3  4

2. Durchqueren Sie das Dom-Element

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("li").each(function(){
      alert($(this).text())
    });
  });
});
</script>
</head>
<body>
<button>输出每个列表项的值</button>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>
</body>
</html>

und öffnen Sie nacheinander Kaffee, Milch, Limonade

3. Jeder und Kartenvergleich

Das folgende Beispiel besteht darin, den ID-Wert jeder Multibox zu erhalten; Jede Methode; Konvertieren Sie das Array schließlich in einen String. Alarmieren Sie diesen Wert.

$(function(){
    var arr = [];
    $(":checkbox").each(function(index){
        arr.push(this.id);
    });
    var str = arr.join(",");
    alert(str);
})

Führen Sie jedes aus: Kontrollkästchen, um diese.id zurückzugeben; Objekte und verwenden Sie dann die get-Methode, um sie in ein natives Javascript-Array zu konvertieren, und verwenden Sie dann die Join-Methode, um sie in eine Zeichenfolge umzuwandeln. Schließlich wird der Wert benachrichtigt bequem, die Kartenmethode zu verwenden.

4. Verwenden Sie every

in jquery, um das Array zu durchlaufen und dabei sowohl den Elementindex als auch den Inhalt zu verwenden. (i ist der Index, n ist der Inhalt)

Der Code lautet wie folgt:

$(function(){
    var str = $(":checkbox").map(function() {
        return this.id;
    }).get().join();    
    alert(str);
})

Beispiel für das Objekt, wobei sowohl Mitgliedsnamen als auch Variableninhalte verwendet werden. (i ist der Mitgliedsname, n ist der Variableninhalt)

Der Code lautet wie folgt:

$.each( [0,1,2], function(i, n){
alert( "Item #" + i + ": " + n );
});

Beispiel für das Durchlaufen von Dom-Elementen, hier wird ein Eingabeformularelement als Beispiel verwendet.

Wenn Sie einen Code wie diesen in Ihrem Dom haben

$.each( { name: "John", lang: "JS" }, function(i, n){
alert( "Name: " + i + ", Value: " + n );
});

Dann verwenden Sie jeden wie folgt

Der Code lautet wie folgt:

<input name="aaa" type="hidden" value="111" /> 
<input name="bbb" type="hidden" value="222" /> 
<input name="ccc" type="hidden" value="333" /> 
<input name="ddd" type="hidden" value="444"/>

5.each findet Elemente basierend darauf

Um den Effekt von „Antworten“ zu erzielen, wird das Wort nur angezeigt, wenn die Maus darüber fährt

html

$.each($("input:hidden"), function(i,val){
alert(val); //输出[object HTMLInputElement]，因为它是一个表单元素。
alert(i); //输出索引为0，1，2，3
alert(val.name); //输出name的值
alert(val.value); //输出value的值
});

js code

<ol class="commentlist">
    <li class="comment">
        <div class="comment-body">
          <p>嗨，第一层评论</p>
          <div class="reply">
            <a href="#" class=".comment-reply-link">回复</a>
          </div>
        </div>
        <ul class="children">
          <li class="comment">
            <div class="comment-body">
            <p>第二层评论</p>
            <div class="reply">
              <a href="#" class=".comment-reply-link">回复</a>
            </div>
          </div></li>
        </ul>
    </li>
</ol>

ps: Das legendäre attr("property", "value"); Wenn es in einigen Browsern nicht funktioniert, können Sie prop verwenden $(this).find("ul>li>:checkbox:eq(" + i + ")").is(" :checked");

6 Offizielle Erklärung

Das Folgende ist die offizielle Erklärung:

$("div.reply").hover(function(){
  $(this).find(".comment-reply-link").show();
},function(){
  $(this).find(".comment-reply-link").hide();
});

Übersicht

Allgemeine Iterationsmethode, mit der Objekte und Arrays iteriert werden können.

Im Gegensatz zur Methode $().each(), die über jQuery-Objekte iteriert, kann diese Methode zum Iterieren über jedes beliebige Objekt verwendet werden. Die Rückruffunktion verfügt über zwei Parameter: Der erste ist das Mitglied des Objekts oder der Index des Arrays und der zweite ist die entsprechende Variable oder der entsprechende Inhalt. Wenn Sie die Each-Schleife verlassen müssen, können Sie dafür sorgen, dass die Rückruffunktion „false“ zurückgibt und andere Rückgabewerte ignoriert werden.

Parameter

objectObject: Das Objekt oder Array, das durchlaufen werden muss.

Rückruf (optional)Funktion: Rückruffunktion, die von jedem Mitglied/Element ausgeführt wird.

Weitere Programmierkenntnisse finden Sie unter: Programmiervideo! !

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion über die Traversal-Funktion in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!