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

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>

Jetzt ändern wir das innerHTML aller

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

$("#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("订购商品成功!");
    }
});