裏紙に書く程度の内容

jQuery セレクタでコンテキストも指定する

目次はこちら > jQueryを使う際の25個Tipsを確認してみる

セレクタを利用する時はコンテキストも指定しましょう

についてです。

コンテキストを指定する

jQueryで要素を指定する際、$('#id')のようにしますが、実は第2引数に検索の範囲を指定することが出来ます。

var obj = $('#id', $('.list'));

みたいな感じで。

範囲を指定するので、軽くなるらしいです。

やってみよう

ほんとかどうか試してみます。

元記事では

var selectedItem = $('#listItem' + i);

より

var selectedItem = $('#listItem' + i, $('.myList'));

の方がいいよ、としていますが、これは間違いな気がします。

前回のTipsのとおり、class指定はid指定より遅いです。

その為、たいていの場合は検索範囲となる$('.myList')自体を検索する方が遅くなり、上記のような検証は意味がありません。

実際試してみると遅くなります。

どういうときに効果があるのか?

しかしながら、このTips自体が嘘なわけではありません。
状況によっては効果が期待できます。

以下のような状態を検証してみましょう。

<body>
    <div class='test'>This is test text</div>
    <div class='test'>This is test text</div>
    <div class='test'>This is test text</div>
    (×1000個。以下略。)

    <ul class="mylist">
      <li class="item-0">list 0</li>
      <li class="item-1">list 1</li>
      <li class="item-2">list 2</li>
      <li class="item-3">list 3</li>
      <li class="item-4">list 4</li>
      <li class="item-5">list 5</li>
      <li class="item-6">list 6</li>
      <li class="item-7">list 7</li>
      <li class="item-8">list 8</li>
      <li class="item-9">list 9</li>
      (以下略。)

要素の数が極めて多いという状況。

この時、

console.time('test')
for (i = 0; i < 1000; i++) {
  var selectedItem = $('.item-' + i);
}
console.timeEnd('test')

を実行するとおよそ 52 ms くらいでした。

対して、コンテキストを指定して、

console.time('test')
for (i = 0; i < 1000; i++) {
  var selectedItem = $('.item-' + i, $('.mylist'));
}
console.timeEnd('test')

を実行すると 32 ms くらいに短縮できました。

確かに早くなっているようです。

但し、スピードのことを言うなら<li id='item-0'>と指定し、

console.time('test')
for (i = 0; i < 1000; i++) {
  var selectedItem = $('#item-' + i);
}
console.timeEnd('test')

とする方がはるかに速く、3ms程度になりました。

ちなみに元記事の

console.time('test')
for (i = 0; i < 1000; i++) {
  var selectedItem = $('#item-' + i, $('.mylist'));
}
console.timeEnd('test')

だと 15msくらいまで落ちます。

結論

使いどころは限定されるが、確かに効果はアリ。

しかしながら、このjQueryセレクタのコンテキストによる範囲指定、スピード目的で使うことはないと思います。

どちらかというと、クラスによる要素指定時に、構造上の範囲指定という意味で使うイメージですね。

Index