jQuery.each()関数の使い方を詳しく解説

each() 関数は、現在の jQuery オブジェクトに一致する各要素をコンテキストとして使用して、指定された関数をトラバースして実行するために使用されます。

いわゆるコンテキストとは、関数内の this ポインター が要素を参照 することを意味します。

この関数はjQueryオブジェクト(インスタンス)に属します。これは、グローバル jQuery オブジェクトの each() 関数とは異なることに注意してください。

構文

jQueryObject.each(callback)

Parameters

Parameters

説明

callback ループ実行用の関数タイプで指定された関数。

each() 関数はループし、一致した各要素に基づいて関数コールバックを呼び出します。関数コールバックが呼び出されるたびに、 each() 関数はコールバック関数内の this 参照を現在反復中の要素にポイントし、2 つのパラメーターを渡します。最初のパラメーターは、一致した要素内の現在の反復要素の index 値 (0 から数えます)、2 番目のパラメーターは現在の反復要素 (これと同じ参照) です。

each() 関数は、各関数コールバック呼び出しの戻り値に基づいて後続のアクションも決定します。戻り値が false の場合、ループは停止します (通常のループの中断と同等)。それ以外の値が返された場合は、次のループの実行を継続することを意味します。

戻り値

each() メソッドの戻り値は jQuery 型で、現在の jQuery オブジェクト自体を返します。

例と説明

次の HTML コードを例に挙げます:

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

次に、すべての

要素の innerHTML を「数値 n」に変更します (n は 1、2、3...)。

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

次に、商品の注文を処理するための[注文]ボタンのクリックイベントを登録します。注文する商品の重量が100kgを超えないようにする必要があります。重量が100kgを超えていない場合は注文できません。対応する情報が求められます。

りー

以上がjQuery.each()関数の使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。