So verwenden Sie die Traversal-Funktion in jQuery-js-Tutorial-php.cn

jQuery-Traversalfunktionen umfassen Methoden zum Filtern, Suchen und Verketten von Elementen

Funktionsbeschreibung

.add() Fügt Elemente zum Satz übereinstimmender Elemente hinzu.

.andSelf() Fügt den vorherigen Satz von Elementen auf dem Stapel zum aktuellen Satz hinzu.

.children() Ruft alle untergeordneten Elemente jedes Elements im Satz übereinstimmender Elemente ab.

.closest() beginnt beim Element selbst, gleicht die oberen Elemente Schritt für Schritt ab und gibt das erste übereinstimmende Vorfahrenelement zurück.

.contents() Ruft die untergeordneten Elemente jedes Elements im Satz übereinstimmender Elemente ab, einschließlich Text- und Kommentarknoten.

.each() iteriert über ein jQuery-Objekt und führt für jedes passende 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 den Satz übereinstimmender Elemente auf neue Elemente, die dem Rückgabewert des Selektors oder der übereinstimmenden Funktion entsprechen.

.find() Ruft die Nachkommen jedes Elements im aktuellen Satz übereinstimmender Elemente ab, gefiltert durch den Selektor.

.first() Reduziert die Menge der übereinstimmenden Elemente auf das erste Element in der Menge.

.has() reduziert die Menge der übereinstimmenden Elemente auf eine Menge, die die Nachkommen des spezifischen Elements enthält.

.is() prüft den aktuellen Satz übereinstimmender Elemente basierend auf dem Selektor und gibt true zurück, wenn mindestens ein übereinstimmendes Element vorhanden ist.

.last() Reduziert die Menge der übereinstimmenden Elemente auf das letzte Element in der Menge.

.map() übergibt jedes Element im aktuellen Matching-Set an die Funktion und erzeugt ein neues jQuery-Objekt, das den Rückgabewert enthält.

.next() Ruft die unmittelbar benachbarten Geschwisterelemente jedes Elements im Satz übereinstimmender Elemente ab.

.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() Entfernt ein Element aus der Menge der übereinstimmenden Elemente.

.offsetParent() Ruft das erste übergeordnete Element zur Positionierung ab.

.parent() Ruft das übergeordnete Element jedes Elements im aktuellen Satz übereinstimmender Elemente ab, gefiltert durch den Selektor (optional).

.parents() Ruft 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() Ruft das unmittelbar vorhergehende Geschwisterelement jedes Elements im übereinstimmenden Elementsatz ab, 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() Ruft die Geschwisterelemente aller Elemente im passenden Elementsatz ab, gefiltert durch den Selektor (optional).

.slice() Reduziert die Menge der übereinstimmenden Elemente auf eine Teilmenge des angegebenen Bereichs.

Verwendung von jedem

jeweils 1 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

Nach dem Login kopieren

<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>
依次弹出Coffee，Milk，Soda

Nach dem Login kopieren

3. Vergleich zwischen jedem und der Karte

Das folgende Beispiel dient dazu, den ID-Wert jeder Multibox zu erhalten;

jeder Methode:

Definieren Sie ein leeres Array und fügen Sie dem Array über die Methode „each“ ID-Werte hinzu. Nachdem Sie das Array in eine Zeichenfolge konvertiert haben, geben Sie den Wert an; 🎜>

Kartenmethode:

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

Nach dem Login kopieren

Führen Sie jedes :Kontrollkästchen aus, um this.id zurückzugeben, speichern Sie diese Rückgabewerte automatisch als jQuery-Objekte und verwenden Sie dann die get-Methode, um sie zu konvertieren in native Javascript-Arrays umwandeln und dann verwenden Die Join-Methode wandelt sie in eine Zeichenfolge um und benachrichtigt schließlich den Wert

Wenn ein Array-Wert benötigt wird, verwenden Sie die Map-Methode, was sehr praktisch ist.

4. Verwenden Sie every

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

Nach dem Login kopieren

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:

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

Nach dem Login kopieren

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

Wenn Sie einen Code wie diesen in Ihrem Dom haben

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

Nach dem Login kopieren

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"/>

Nach dem Login kopieren

5. Suchen Sie jeweils das Element

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

Nach dem Login kopieren

entsprechend, um den Effekt zu erzielen, dass das Wort „Antwort“ nur angezeigt wird, wenn die Maus darüber fährt

Der JS-Code lautet wie folgt

Erzielen Sie den Effekt und überprüfen Sie, ob alle Beurteilungsfragen Auswahlmöglichkeiten haben

<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>

Nach dem Login kopieren

JS-Code

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

Nach dem Login kopieren

<ul id="ulSingle">
      <li class="liStyle">
        1. 阿斯顿按时<label id="selectTips" style="display: none" class="fillTims">请选择</label>
        <!--begin选项-->
        <ul>  
              <li class="liStyle2">
                <span id="repSingle_repSingleChoices_0_labOption_0">A     </span>.阿萨德发<input type="hidden" name="repSingle$ctl00$repSingleChoices$ctl00$hidID" id="repSingle_repSingleChoices_0_hidID_0" value="1" />
                <input id="repSingle_repSingleChoices_0_cheSingleChoice_0" type="checkbox" name="repSingle$ctl00$repSingleChoices$ctl00$cheSingleChoice" /></li>    
              <li class="liStyle2">
                <span id="repSingle_repSingleChoices_0_labOption_1">B     </span>.阿萨德发<input type="hidden" name="repSingle$ctl00$repSingleChoices$ctl01$hidID" id="repSingle_repSingleChoices_0_hidID_1" value="2" />
                <input id="repSingle_repSingleChoices_0_cheSingleChoice_1" type="checkbox" name="repSingle$ctl00$repSingleChoices$ctl01$cheSingleChoice" 
              <li class="liStyle2">
                <span id="repSingle_repSingleChoices_0_labOption_2">C     </span>.阿斯顿<input type="hidden" name="repSingle$ctl00$repSingleChoices$ctl02$hidID" id="repSingle_repSingleChoices_0_hidID_2" value="3" />
                <input id="repSingle_repSingleChoices_0_cheSingleChoice_2" type="checkbox" name="repSingle$ctl00$repSingleChoices$ctl02$cheSingleChoice" /></li>
            
        </ul>
        <!--end选项-->
        <br />
      </li>
    </ul>

Nach dem Login kopieren

6. Offizielle Erklärung

//验证单选题是否选中
    $("ul#ulSingle>li.liStyle").each(function (index) {
      //选项个数
      var count = $(this).find("ul>li>:checkbox").length;
      var selectedCount = 0
      for (var i = 0; i < count; i++) {
        if ($(this).find("ul>li>:checkbox:eq(" + i + ")").attr("checked")) {
          selectedCount++;
          break;
        }
      }
      if (selectedCount == 0) {
        $(this).find("label#selectTips").show();
        return false;
      }
      else {
        $(this).find("label#selectTips").hide();
      }
    })

Nach dem Login kopieren

Das Folgende ist die offizielle Erklärung:

Übersicht

Allgemeine Iterationsmethode, die zum Iterieren verwendet werden kann Objekte und Arrays.

jQuery.each(object, [callback])

Nach dem Login kopieren

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.