1

注：jQuery 1.3.2を使用します（はい、アップグレードしていますが、これには1.3.2である必要があります）

これを実装するためのより良い方法を探しています

HTML要素（これはカスタムPHPフレームワークからのものであり、変更を加えるのは非常に面倒です）：

<select id="car[0][car_id]" name="car[0][car_id]">
    ... 100+ options
</select>

次のような別のドロップダウンを動的に追加できます。

<select id="car[1][car_id]" name="car[1][car_id]">
    ... 100+ options
</select>

と

<select id="car[2][car_id]" name="car[2][car_id]">
    ... 100+ options
</select>

今、私はこれらを次のように繰り返しています：

function showCarinfo() {
    for ( var car_number = 0; $("#car\\["+car_number+"\\]\\[car_id\\]").length > 0; car_number++ ) {
        // do stuff
    }
}

変更の選択について：

$("input[name*=car_id]").change(function(){
    // display info for each car selected from each drop down select menu
    showCarinfo(); 
});

onchangeおよびitetingメソッドを実装するためのより良い方法はありますか？'Attribute contains Selector'（http://api.jquery.com/attribute-contains-selector/）を使用していますが、onchangeイベントで大きなパフォーマンスの問題が発生しているようです。

アップデート：

最後の部分を検索するために*を$に置き換えました。これは（私が思うに）パフォーマンスに少し役立ちますが、それでもこれが最良の解決策であるかどうかを調べます

$("input[name$=car_id]").change(function(){
    // display info for each car selected from each drop down select menu
    showCarinfo(); 
});
4

3 に答える 3

2

パフォーマンスの問題はshowCarinfo関数にあります。ループでDOM選択を実行しています。

そうしないでください。代わりに、選択範囲をキャッシュしてください...

function showCarinfo() {
    var cars = $("input[name*=car_id]");
    for ( var car_number = 0; car_number < cars.length; car_number++ ) {
        cars.eq(i); // do stuff
    }
}

またはあなたが使用することができます.each()

function showCarinfo() {
    $("input[name*=car_id]").each(function() {
        // do stuff
    });
}

また、ハンドラーが実行しているのがその関数の呼び出しだけである場合、小さな最適化はこれを実行することです...

$("input[name*=car_id]").change(showCarinfo);
于 2012-04-30T17:25:18.313 に答える
0

あなたはこれを使うことができます：

$('input[name$="[car_id]"]').change(function(){
  // codes
});
于 2012-04-30T17:20:42.387 に答える
0

推測と同じですが、changeイベントをすべてのinput要素にバインドし、イベントが呼び出されたときにそれらをフィルタリングしてみます。

$("input").change(function() {
  if ($(this).attr('name').indexOf('car_id') == 0) {
    showCarinfo();
  }
});

そうすれば、jQueryは、セレクターに基づいて要素にイベントハンドラーをアタッチするために、ページの実行をブロックする必要がありません。

于 2012-04-30T17:14:49.623 に答える