3


1

jquery-セレクターを繰り返してはいけませんか(変数に保存する)?

セレクターを数回繰り返していることに気付くことがあります。 何らかの方法でjqueryオブジェクトを変数に保存し、それを使用する必要がありますか? 簡単な例として、以下はどうですか?:

$('a.contactus').css('padding', '10px');
$('a.contactus').css('margin', '4px');
$('a.contactus').css('display', 'block');

効果的に各css関数を連鎖させることができるので、これは素晴らしい例ではないことがわかりました。 しかし、それらのそれぞれの間に条件付きステートメントまたは連鎖を停止する何かがあると仮定します。

jqueryオブジェクトを変数に保存できますか? もしそうなら、いつ/私はできる/私はできますか?

3 Answer


12


それを複数回再利用する(チェーンできない)場合、変数に格納することは悪い考えではありません。使用頻度が高いほど、またはセレクターがより高価であるほど、変数として格納することをお勧めします。 例えば、 `$(this)`の数回のパフォーマンスはささいなことですが、 `$(" [attr = val] ")`のパフォーマンスは非常に貧弱で、再利用する場合は絶対にキャッシュする必要があります。 疑わしい場合は、変数としてキャッシュします。

'' '' '

別のヒントとして、この例では、オブジェクトをhttp://api.jquery.com/css/ [.css()]に渡すこともできます。

$('a.contactus').css({ padding: '10px', margin: '4px', display: 'block' });


4


_ 何らかの方法でjqueryオブジェクトを変数に保存し、それを使用する必要がありますか? _

可能な場合は、* _ performance_ *のためにすべきです。 たとえば、次のようにコードを書き直すことができます。

var $el = $('a.contactus');
$el.css('padding', '10px');
$el.css('margin', '4px');
$el.css('display', 'block');

次のようにさらに短くすることができます。

$el.css({
  padding: '10px',
  margin:'4px',
  display: 'block'
});

変数に共通/反復セレクターを保存することは、jqueryプラグインを作成して変数に「$(this)」を保存するときにも役立ちます。


3


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

var myvar = $('a.contactus');
myvar.css('padding', '10px').css('margin', '4px').css('display', 'block');

しかし、読みやすさのために私はこれを行います

var myvar = $('a.contactus');
myvar.css('padding', '10px')
  .css('margin', '4px')
  .css('display', 'block');

基本的に$(someselector)を使用するたびに、domを反復処理します。 可能であれば、要素参照を保存する必要があります。