3

要素の順序付きリストを作成するとき、インデックスで1つにアクセスするための3つの合理的な方法を考えることができます。

最後に数字が付いた一意のIDを指定し、文字列操作を使用します。

<ol>
 <li id="item-0"></li>
 <li id="item-1"></li>
 <li id="item-2"></li>
</ol>

...

for(var i = 0; i < 3; i++) {
   $('#item-' + i).doWhatever();
}

それらに同じクラスを与え、eqセレクターを使用します。

<ol>
 <li class="item"></li>
 <li class="item"></li>
 <li class="item"></li>
</ol>

...

for(var i = 0; i < 3; i++) {
   $('.item').eq(i).doWhatever();
}

または、同じクラスを指定して、nth-childセレクターを使用します。

<ol>
 <li class="item"></li>
 <li class="item"></li>
 <li class="item"></li>
</ol>

...

for(var i = 1; i <= 3; i++) {
   $('.item:nth-child(' + i + ')').doWhatever();
}

それぞれの長所と短所は何ですか？他にもっと良い方法はありますか？

4

2 に答える 2

4

いくつかの違いが思い浮かびます。

  • 速度:(少なくともChromeでは）これらのテストケースによると、最初の速度は他の速度の約2倍です：http：//jsperf.com/item1-vs-item-eq-1
  • 文字列操作： 2番目はそれを必要としない唯一のものです
  • 0または1からのインデックス付け：3番目は0ではなく1からインデックス付けされます。これは、HTMLのビルド/アクセス方法によっては問題を引き起こす可能性があります。
  • スタイリング：すべての要素を同様にスタイリングする場合、2番目と3番目は追加のクラスを必要としません
  • 移植性：フレームワークを変更する必要がある場合、標準のCSSセレクターを使用するため、1番目と3番目のフレームワークの移植性が高くなる可能性があります。
于 2012-12-12T05:35:31.447 に答える
1

私はあなたのパフォーマンステストに4番目のテストケースを追加しました：http：//jsperf.com/item1-vs-item-eq-1/2

ポイントを順番に検討する：

  • スピードそれは簡単に提示されたものの中で最速の方法です
  • 文字列操作なし
  • インデックス作成は0から始まります
  • スタイリング親に基づいてスタイリングすることも、リストアイテム自体にクラスを追加することもできます。
  • getElementByIdとで簡単に実装できた携帯性childNodes

考慮すべき主なことは、すべてのメソッドで、リストを反復処理するときにDOMに繰り返しクエリを実行する必要があるということです。単一の要素にのみアクセスする場合、それは大したことではありませんが、リスト全体を処理する場合は、単一のクエリを実行するだけでパフォーマンスに大きな違いが生じます。

編集好奇心から、私はリストを見つけるためにjQueryをまったく使用せず、代わりに上記のように必要最低限​​のDOMAPIを使用するようにケースを再度更新しました。
私のばかげた間違いを指摘した後にSandorが行った変更があっても、パフォーマンスへの顕著な影響があります。そのことを念頭に置いて、それは主に特定のユースケースと、リストアイテムを見つける際の速度と汎用性を比較検討する方法に帰着すると思います。

于 2012-12-12T05:49:23.007 に答える