JQuery で each() を使用する方法についての説明

jQuery オブジェクトの場合、each メソッドは単純に委任されます。つまり、jQuery オブジェクトを最初のパラメーターとして jQuery の each メソッドに渡します。 jQuery が提供するメソッドは、パラメーター 1 で提供されるオブジェクトのすべてのサブ要素に対して 1 つずつメソッドを呼び出すことです。 each() 関数は、基本的にすべてのフレームワークによって提供されるツール関数であり、これを介してオブジェクトを走査できます。配列の属性値を取得して処理します。 jQuery と jQuery オブジェクトの両方がこのメソッドを実装します。jQuery オブジェクトの場合、各メソッドは単純に委任されます。つまり、jQuery オブジェクトは、jQuery の各メソッドに最初のパラメータとして渡されます。つまり、jQuery によって提供される各メソッドは、jQuery のすべてのサブ要素です。パラメータ 1 で指定されたオブジェクトは 1 つずつ呼び出されます。 jQuery オブジェクトが提供する each メソッドは、jQuery 内のサブ要素を 1 つずつ呼び出します。

各関数の効果は、パラメータの種類によっては完全に一致しません:

1. オブジェクトを走査します (追加パラメータを使用)

コードは次のとおりです:

$.each(Object, function(p1, p2) {    this;       //这里的this指向每次遍历中Object的当前属性值
    p1; p2;     //访问附加参数}, ['参数1', '参数2']);

ログイン後にコピー

2. 配列を走査します(添付パラメータあり)

コードは次のとおりです:

$.each(Array, function(p1, p2){    this;       //这里的this指向每次遍历中Array的当前元素
    p1; p2;     //访问附加参数}, ['参数1', '参数2']);

ログイン後にコピー

3. オブジェクトを走査します(追加のパラメータなし)

コードは次のとおりです:

$.each(Object, function(name, value) {     this;      //this指向当前属性的值
     name;      //name表示Object当前属性的名称
     value;     //value表示Object当前属性的值});

ログイン後にコピー

4. カレンダー配列 (追加パラメーターなし)

コードは次のとおりです:

$.each(Array, function(i, value) {     this;      //this指向当前元素
     i;         //i表示Array当前下标
     value;     //value表示Array当前元素});

ログイン後にコピー

以下は、jQuery の各メソッドの一般的な使用例です

JQuery の

 arr = ["one", "two", "three", "four" arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 90 obj = {one: 1, two: 2, three: 3, four: 4

ログイン後にコピー

each 関数は 1.3.2 の公式ドキュメントで次のように説明されています:

each(callback)

一致する各要素をコンテキストとして使用して関数を実行する。
は、渡された関数が実行されるたびに、関数内の this キーワードが異なる DOM 要素 (毎回異なる一致する要素) を指すことを意味します。また、関数が実行されるたびに、一致する要素の集合における実行環境としての要素の位置を表す数値（0から始まる整数）が関数にパラメータとして渡されます。「false」を返すとループが停止します (通常のループで「break」を使用するのと同じです)。次のループにジャンプするには、「true」を返します (通常のループで「Continue」を使用するのと同じです)。

次のコールバックは
コールバック関数で、要素をトラバースするときに指定する必要がある操作を示します。以下の簡単な例から始めましょう: 2 つの画像を反復処理し、その src 属性を設定します。注: ここでは、これは jQuery オブジェクトではなく DOM オブジェクトを指します。

<img></img/>$("img").each(function(i){ 
this.src = "test" + i + ".jpg"; 
}); 

结果:[ <img src="test0.jpg" />, <img src="test1.jpg" /> ]

ログイン後にコピー

もちろん、要素をトラバースするとき、jquery ではカスタマイズされたジャンプが可能です。サンプルコードを参照してください。事前に each() ループから抜け出すために 'return' を使用できます。

HTML コード:

コードは次のとおりです:

<button>Change colors</button><span></span><p></p><p></p><p></p><p></p><p id="stop">Stop here</p><p></p><p></p><p></p>

ログイン後にコピー

jQuery コード:

コードは次のとおりです:

$("button").click(function(){
    $("p").each(function(index, domEle){
        $(domEle).css("backgroundColor", "wheat");        if ($(this).is("#stop")) {
            $("span").text("在p块为#" + index + "的地方停止。");            return false;
        }
    })
}

ログイン後にコピー

またはこれを書いてください:

コードは次のとおりです:

$("button").click(function(){
    $("p").each(function(index){
        $(this).css("backgroundColor","wheat");        if($(this).is("#stop")){
            $("span").text("在p块为#"+index+"的地方停止。");            return false;
        }
    })
}

ログイン後にコピー

イラスト:

each() メソッドは以下を指定します一致する要素ごとに実行する関数。

ヒント: false を返すと、ループを早期に停止することができます。
構文
$(selector).each(function(index,element)) パラメータ説明
function(index,element) 必須。一致する要素ごとに実行する関数を指定します。
•index - セレクターのインデックス位置
•element - 現在の要素 (「this」セレクターも使用できます)

例
各 li 要素のテキストを出力します:

コードは次のとおりです:

$("button").click(function(){
    $("li").each(function(){
        alert($(this).text())
    });
});

ログイン後にコピー

实例
obj 对象不是数组
该方法同1的最大区别是：fn方法会被逐次不考虑返回值的进行进行。换句话说，obj对象的所有属性都会被fn方法进行调用，即使fn函数返回false。调用传入的参数同1类似。

代码如下:

jQuery.each = function(obj, fn, args){    if (args) {        if (obj.length == undefined) {            for (var i in obj)
                fn.apply(obj, args);
        } else {            for (var i = 0, ol = obj.length; i < ol; i++) {                if (fn.apply(obj, args) === false)                    break;
            }
        }
    } else {        if (obj.length == undefined) {            for (var i in obj)
                fn.call(obj, i, obj);
        } else {            for (var i = 0, ol = obj.length, val = obj[0]; i < ol && fn.call(val, i, val) !== false; val = obj[++i]) {
            }
        }
    }    return obj;
}

ログイン後にコピー

需要特别注意的是each方法中fn的具体调用方法并不是采用简单的fn(i,val)或fn(args),而是采用了fn.call(val,i,val)或fn.apply(obj.args)的形式，这意味着，在你自己的fn的实现中，可以直接采用this指针引用数组或是对象的子元素。

那怎么跳出each呢
jquery再遍历选定的对象时候用each比较方便。有种应用是找到里面符合条件的对象后，要跳出这个循环。
javascript的跳出循环一般用break.
同事遇到这个问题，下意识的用了break，想跳出这个循环。结果报错
SyntaxError: unlabeled break must be inside loop or switch
经查，应该用一个
在回调函数里return false即可，大多数jq的方法都是如此的

代码如下:

返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。
返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。

以上がJQuery での each() の使用法の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。