jqueryのセレクタの挙動に関する考察

Pocket
[`evernote` not found]

なんとも硬いタイトルでございますが、うまくタイトルが思いつかなかったのでご許しを。
何を書きたいかというと、jqueryで

$('li:even').addClass('even');

みたいなセレクタの挙動について、最近ハマったことをお伝えしたかったんです。

普通に書くとこんな感じになります。

<h1>孫家の人々</h1>
<ul class="list">
 <li>孫悟空</li>
 <li>孫悟飯</li>
 <li>チチ</li>
</ul>
$(document).ready(function(){
 $('ul.list li:even').addClass('even');
});

DEMO1
普通に奇数行にスタイルがつきます。

では、ulが複数あった場合はどうでしょうか?

<h1>孫家の人々</h1>
<ul class="list">
 <li>孫悟空</li>
 <li>孫悟飯</li>
 <li>チチ</li>
</ul>

<h1>サイヤ人な人々</h1>
<ul class="list">
 <li>孫悟空</li>
 <li>孫悟飯</li>
 <li>ベジータ</li>
 <li>ナッパ</li>
 <li>ラディッツ</li>
</ul>

DEMO2

あれ?
2つ目のリストがずれている?

そうなんです。
上記のような記述方法だと、ulそれぞれに対してではなく、2つ目以降のulも一つ目のulの続きとして認識されてしまいます。そのため、DEMO2のような表示になってしまうという訳です。

ではどうすれはいいのか?

$('ul.list').each(function(){
 $(this).find('li:even').addClass('even');
})

こんな感じで.each()を使って、ループを回してあげると対象のエリアが限定されて意図通りの表示ができるようになります。

DEMO3

地味な事ですが、知らないとちょっと困ってしまうトピックスでした。

Follow me!

Pocket
[`evernote` not found]

コメントは受け付けていません。