1

私はIDを持つ6つのdivを持っています" #first、#second...。#sixth

これらの各divで関数を実行する場合は、各div名を保持する配列を設定します。関数を適用したい場合は、配列内の各要素を反復処理し、（たとえば）背景色を赤に変更するforループを設定します。

function updateAllDivsInTheList() {
  for(var i = 0; i < array.size; i++)
    $("#"+array[i]).changeCssFunction();
  }
}

新しいdivを作成するたびに、それを配列に追加します。

問題は、更新する必要のあるdivが多数ある場合（たとえば、1200 divのうち1000）、配列内のすべての要素を順番に反復する必要があるのは、苦痛/パフォーマンスタンクである可能性があることです。複数のdivを更新するための代替のより効率的な方法またはデータ構造はありますか？たぶん、配列以外のより効率的なデータ構造を使用しますか？それとも、私が最も効率的な方法で行っていることですか？

4

4 に答える 4

8

名前のリストがjQueryオブジェクトのリストになるように、jQueryオブジェクトをキャッシュする必要があります。1000アイテムの配列を反復処理するのは高速です。毎回1000個の新しいjQueryオブジェクトを構築するのは遅いです。

var names = [ "one", "two", ..., "six" ];

// Turn the array of strings into an array of their corresponding jQuery ele
var $divs = $.map(names, function (v) { return $("#" + v); });

複数のIDを1つのセレクターにチェーンして、（外部）ループを回避することもできます。jQueryは（おそらく）これをループとして内部的に実装します。

$('#one, #two, #three').changeCssFunction();

DOMの1000回の更新は遅くなることに注意してください。一部のブラウザでは、他のブラウザよりも遅くなります。親オブジェクトからクラスを追加または削除して、新しいCSSセレクターが単一のDOM更新ですべての子要素と一致できるように、コードを再考することを検討してください。

于 2012-06-27T21:10:41.397 に答える
0 
var divs$ = [];
$('div.someClass').each(function(i,e) {
  divs$.push($(e));
});

function updateAllDivsInTheList() {
  for(var i = 0; i < array.size; i++)
    divs$[i].changeCssFunction(); 
  }
}
于 2012-06-27T21:16:11.043 に答える
0

jQueryメソッドを呼び出すと、セット内の一致するすべての要素を内部的にループします。したがって、すべての要素を含む1つのjQueryオブジェクトのみを構築する方が効率的です。

$(array.map(function(id){return "#"+id;}).join(", ")).changeCssFunction();

これは、たとえばクラスを使用するなど、より単純なセレクターを使用するとはるかに簡単になります。また、メソッドを複数回使用する場合は、必ずjQueryオブジェクトをキャッシュしてください。

実際のパフォーマンスを向上させたい場合は、jQueryを使用しないでください。ネイティブDOMメソッドを使用してスタイル変更を直接適用するか（もちろん、その複雑さとクロスブラウザーの安全性に依存します）、単一要素のスタイル属性の代わりにスタイルシートを試して操作することができます。

于 2012-06-27T21:20:54.793 に答える
0

より効率的な方法は、クライアント側でこれを行わないことです。Internet Explorerでは、domとのすべての対話（cssクラスのチェック、cssの変更、属性のチェック）により、domが更新され、ページが「フリーズ」する可能性があります。それでも実行する場合は、これらの各divに共通のクラス名を付け、jqueryを使用してそのクラス名を選択する必要があります。次に、返されたjqueryオブジェクトのリストを反復処理できます。

于 2012-06-27T21:13:43.080 に答える