6

昨夜、jQuery Cookbook (Oreilly) を読んでいるときに、本やオンラインで答えが見つからないように見える質問を生成する each 関数に出くわしました。この質問に使用するコードはjQueryサイトから見つけたもので、参考として以下に含めました。

<script>
    $(document.body).click(function () {
      $("div").each(function (i) {            //Where does the 'i' come from?
        if (this.style.color != "blue") {
          this.style.color = "blue";
        } else {
          this.style.color = "";
        }
      });
    });
</script>

「i」パラメーターの由来と目的を知りたいのですが、それがどこから来たのか (クライアント コード) と、それが何に使用されているのかがわかりません。Java の専門家として、Java のコンテキストでメソッドまたは「関数」パラメーターに精通しているため、概念をより簡単に理解できます。

ここでは、クライアント コードが表示されず (ライブラリにあると思われます)、それ ( i) が参照されていないため、関数内でどのように関連しているかがわかりません。

コミュニティの誰かがこれについて明確な説明をしたり、これに関するガイドを紹介してくれたりできますか?

each 関数と 'this' 参照の目的を理解しているので、この質問の将来の閲覧者に関係があると思わない限り、これらを説明する必要はありません。

4

4 に答える 4

13

その場合、を宣言する必要はありませんでしたi。eachメソッドのシグネチャは、jQueryのドキュメントに記載されています。

.each( function(index, Element) )

ご覧のとおり、1つの引数を取り、その引数は2つの引数をとる関数indexですElement。

コードでiは、はの識別子でindexあり、呼び出されるたびに（反復ごとに1回）、jQueryによってコールバック関数に渡されます。また、2番目の引数を渡しますが、その識別子を宣言していないため、argumentsオブジェクトを介してのみアクセスできます。

argumentsそのオブジェクトをログに記録することで、コールバックに何が渡されるかを正確に確認できます。

​$("div").each(function () { //No arguments listed in callback signature...
    console.log(arguments); //But arguments are still passed
});​​

上記の実例を次に示します。

jQuery自体からの関連コードは次のとおりです（コメントが追加されました）。

//...
each: function( object, callback, args ) {
    //...

    //Iterate over the matched set of elements
    for ( ; i < length; ) {
        /* Call the callback in the context of the element, passing in the 
           index and the element */
        if ( callback.call( object[ i ], i, object[ i++ ] ) === false ) {
            break;
        }
    }
}
于 2012-06-19T07:55:50.787 に答える
2

を呼び出すときは、関数参照$().each()を渡します。関数が機能する方法は、jQueryオブジェクトの各要素について、現在の要素をコンテキストとして指定した関数を呼び出すことです（つまり、関数呼び出し内では、変数は現在の要素です）。.each()this

これで、jQueryが指定した関数を呼び出すときに、コードで関数を呼び出す場合と同じように、オプションの引数を渡すことができます。を使用.each()すると、指定した関数を呼び出すたびに、インデックスと現在の要素の2つの引数が渡されます。

これは、jQueryが次のように呼び出しているかのようです。

$('div').each(foo);

// results in something like
for(var i=0; i < $('div').length; i++) {

    // calling the foo function
    foo(i, $('div')[i]);

    // this is simplified, of course. 
    // this doesn't take into account the function context, or "this" variable.
}

公式ドキュメントでもそれがよりよく説明されていることに気付くかもしれません。

于 2012-06-19T07:57:09.023 に答える
1

APIで述べられているように、「i」はインデックスです。

これは、均一な要素と不均一な要素を区別したい場合に役立ちます。

好き：

$(document.body).click(function () {
  $("div").each(function (i) {            //Where does the 'i' come from?
    if (i % 2 == 0) {
      this.style.color = "blue";
    } else {
      this.style.color = "";
    }
  });
});
于 2012-06-19T07:58:11.023 に答える