Heim > Web-Frontend > js-Tutorial > Ausführliche Erklärung zur Verwendung der jQuery.each()-Funktion

Ausführliche Erklärung zur Verwendung der jQuery.each()-Funktion

巴扎黑
Freigeben: 2017-07-09 11:25:38
Original
993 Leute haben es durchsucht

Die Funktion

each() wird verwendet, um die angegebene Funktion zu durchlaufen und auszuführen, wobei jedes Element, das mit dem aktuellen jQuery-Objekt übereinstimmt, als Kontext verwendet wird.

Der sogenannte Kontext bedeutet, dass der Zeiger innerhalb der Funktion auf das Element verweist.

Diese Funktion gehört zum jQuery-Objekt (Instanz). Beachten Sie, dass sich dies von der Funktion every() des globalen jQuery-Objekts unterscheidet.

Syntax

jQueryObject.each( callback )

Parameter

Parameter

Beschreibung

Rückruffunktion, die durch den Funktionstyp für die Schleifenausführung angegeben wird. Die Funktion

each() führt eine Schleife aus und ruft den Funktionsrückruf basierend auf jedem übereinstimmenden Element auf. Jedes Mal, wenn der Funktionsrückruf aufgerufen wird, verweist die Funktion every() mit dieser Referenz innerhalb der Rückruffunktion auf das Element, das gerade iteriert wird, und übergibt zwei Parameter. Der erste Parameter ist der Index -Wert des aktuell iterierten Elements im übereinstimmenden Element (ab 0 gezählt) und der zweite Parameter ist das aktuell iterierte Element (dieselbe Referenz).

each()-Funktion bestimmt auch nachfolgende Aktionen basierend auf dem Rückgabewert jedes Funktionsrückrufaufrufs. Wenn der Rückgabewert falsch ist, stoppt die Schleife (entspricht einem Abbruch in einer normalen Schleife); wenn ein anderer Wert zurückgegeben wird, bedeutet dies, dass die Ausführung der nächsten Schleife fortgesetzt wird.

Rückgabewert

Der Rückgabewert der Methode every() ist vom Typ jQuery und gibt das aktuelle jQuery-Objekt selbst zurück.

Beispiel & Beschreibung

Nehmen Sie den folgenden HTML-Code als Beispiel:

<div id="n1">
    <div id="n2">
        <ul id="n3">
            <li id="n4">item1</li>
            <li id="n5">item2</li>
            <li id="n6">item3</li>
        </ul>
    </div>  
</div>
<form id="demoForm">
    <input name="goods_weight" type="checkbox" value="20">A(20kg)<br>
    <input name="goods_weight" type="checkbox" value="33">B(33kg)<br>
    <input name="goods_weight" type="checkbox" value="36">C(36kg)<br>
    <input name="goods_weight" type="checkbox" value="49">D(49kg)<br>
    <input name="goods_weight" type="checkbox" value="56">E(56kg)<br>
    <input name="goods_weight" type="checkbox" value="78">F(78kg)<br>
    <input id="btnBuy" type="button" value="订购">    
</form>
Nach dem Login kopieren

Jetzt ändern wir das innerHTML aller

  • -Elemente in „Nummer n“. " (n ist 1, 2, 3...).

    $("ul li").each(function(index, element){
        // this === element
        $(element).html( "编号" + (index + 1) );  
    });
    Nach dem Login kopieren

    Als nächstes registrieren wir das Ereignis des Klickens auf die Schaltfläche [Bestellen], das zur Verarbeitung der Produktbestellung verwendet wird. Es ist erforderlich, dass das Gewicht jeder Bestellung nicht angegeben wird 100 kg überschreiten, andernfalls kann die Bestellung nicht durchgeführt werden und es werden entsprechende Informationen angezeigt.

    $("#btnBuy").click(function(){
        var weight = 0;
        $("[name=goods_weight]:checked").each(function(){
            weight += parseInt(this.value);
            if(weight > 100){ // 重量超标,停止循环
                return false;
            }
        });
        if(weight <= 0){
            alert("没有选择任何商品!");
        }else if(weight > 100){
            alert("一次订购的商品重量不能超过100kg!");
        }else{
            // 订购商品
            alert("订购商品成功!");
        }
    });
    Nach dem Login kopieren

    Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zur Verwendung der jQuery.each()-Funktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

  • Verwandte Etiketten:
    Quelle:php.cn
    Erklärung dieser Website
    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
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage