Explication détaillée de la façon d'utiliser la fonction jQuery.each()

La fonction

each() est utilisée pour parcourir et exécuter la fonction spécifiée en utilisant chaque élément correspondant à l'objet jQuery actuel comme contexte.

Le soi-disant contexte signifie que le pointeur this à l'intérieur de la fonction fait référence à l'élément .

Cette fonction appartient à l'objet (instance) jQuery. Notez que ceci est différent de la fonction each() de l'objet jQuery global.

Syntaxe

jQueryObject.each( callback )

Paramètres

Paramètres

Description

Fonction de rappel spécifiée par Type de fonction pour l'exécution de la boucle. La fonction

each() bouclera et appellera le rappel de fonction en fonction de chaque élément correspondant. Chaque fois que la fonction de rappel est appelée, la fonction each() pointera la référence this à l'intérieur de la fonction de rappel vers l'élément en cours d'itération et transmettra deux paramètres. Le premier paramètre est la valeur index de l'élément itéré actuel dans l'élément correspondant (en comptant à partir de 0), et le deuxième paramètre est l'élément itéré actuel (la même référence que celle-ci).

La fonction each() détermine également les actions ultérieures en fonction de la valeur de retour de chaque appel de rappel de fonction. Si la valeur de retour est fausse, la boucle s'arrête (équivalent à une interruption dans une boucle normale) ; si une autre valeur est renvoyée, cela signifie continuer à exécuter la boucle suivante.

Valeur de retour

La valeur de retour de la méthode each() est de type jQuery, renvoyant l'objet jQuery actuel lui-même.

Exemple et description

Prenons le code HTML suivant comme exemple :

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

Maintenant, nous changeons le innerHTML de tous les éléments

" (n vaut 1, 2, 3...).

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

Ensuite, nous enregistrons l' événement du clic sur le bouton [Commander], qui sert à traiter la commande de produits. Il est obligatoire que le poids de chaque commande ne soit pas modifié. dépasser 100 kg, sinon la commande ne peut pas être passée et une invite sera affichée.

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!