1

私はそれぞれの機能について本当に混乱しています。

JsFiddle

<html>
    <head>
        <script type="text/javascript" src="jquery-1.8.0.min.js"></script>
        <script>
        $(document).ready(function(){
            //$(".a").click(function(){
            //  alert("hi");
            //});
            $(".a").each(function(){
                $(this).click(function(){
                    alert("hi");
                });
            });
        });
        </script>
    </head>
    <body>
    <div class="a">hi</div>
    <div class="a">hi</div>
    </body>
</html>

.click関数を直接使用することと使用することの違いは何.eachですか？どちらも機能します。

どうもありがとう。

編集

これら2つの方法が同じである場合、なぜ.each必要なのか例を挙げてください。

4

3 に答える 3

4

実際、ここには違いがあります。.each反復ごとに新しい関数を作成すると、各要素はイベントハンドラーとして割り当てられた異なる関数オブジェクトを取得します。選択全体
を呼び出す場合は、これは当てはまりません。.click渡された関数を各要素のイベントハンドラーとして使用します。ただし、最終的な動作は同じです。

要素を反復処理する前に一度作成することで、新しい関数オブジェクトの作成を回避できます。

var handler = function(){
    alert("hi");
};
$(".a").each(function(){
    $(this).click(handler);
});

しかし、そうする必要はありません。内部で.click呼び出し、次に呼び出して、選択した要素を反復処理し、イベントハンドラーをバインドします。.on.each

.eachこれは、要素を反復処理し、要素を使ってやりたいことを行うための一般的な方法です。たとえば、各要素内の単語を別の単語に置き換えたい場合があります。

$('a').each(function() {
    $(this).text($(this).text().replace('foo', 'bar'));
});

これはあまり良い例ではありません。なぜなら、ここにもそれを行うためのより良い方法があるからですが、それがあなたにいくつかのアイデアを与えることを願っています。

これら2つの方法の間にパフォーマンスの違いがあるのはなぜですか？

外部.each呼び出しは冗長であり、追加のオーバーヘッドが追加されます。「コールチェーン」は次のようになります。

each (1 time)
  -> callback (N times)
    -> click (1 time) (N times in total)
      -> on (1 time) (N times in total)
        -> each (1 time) (N times in total)
          -> callback (which ultimately adds the event handler) (1 time) (N times in total)

.click比較すると、これはおおよそ、直接電話をかけたときに起こることです。

click (1 time)
  -> on (1 time)
    -> each (1 time)
      -> callback (which ultimately adds the event handler) (N times)

したがって、より多くの関数が実行されるだけでなく、さらに、同じ関数（.clicknadなど.on）が複数回実行されます。各関数は、呼び出しごとに1回チェックまたは変数の初期化を行う可能性があるため、複数回呼び出すと、明らかに時間がかかります。

于 2012-08-21T13:47:47.177 に答える
2

.click要素のリストで($('selector').length > 1)、イベントを追加するためにjQueryによって内部的にループされます。

.eachそして.click、あなただけが実行します。しかし、それは同じjQuery反復コードを通過します。

私はそれがあなたの最後にきちんとしているので1番目を使うことを好みます。

于 2012-08-21T13:44:34.420 に答える
1

違いはなく、jqueryソースをたどれば同じことになります。したがって、単純にを使用することをお勧めしますclick。

于 2012-08-21T13:43:46.730 に答える