もしかしたら、jQueryの基本中の基本なのかもしれませんが、最近知ったので、一応メモ。
jQueryのセレクタ指定において、:nth-child(n)は要素を1始まりで取得しますが、:eq(n)は0始まりなようです。
例えば以下のようなHTMLソースがある場合、
<ul>
<li>liタグ1つ目</li>
<li>liタグ2つ目</li>
</ul>
以下のようなコードを書くと、
$('ul li:nth-child(1)').css('background-color', 'red');
$('ul li:eq(1)').css('background-color', 'blue');
“liタグ1つ目”と書かれたliタグの背景は赤くなり、”liタグ2つ目”と書かれたliタグの背景は青くなります。
憶え方としては、CSSの擬似クラスにもある指定方法は1始まりで、jQueryオリジナルの指定は0始まりとのこと。例えば、CSSにもある:nth-of-typeも1始まり。
<div>
<h3>h3タグ</h3>
<p>pタグ1つ目</p>
<p>pタグ2つ目</p>
</div>
$('div p:nth-of-type(1)').css('background-color', 'red');
$('div p:eq(1)').css('background-color', 'blue');
$('div p:nth-child(1)').css('background-color', 'green');
上記のようなコードの場合は、”pタグ1つ目”と書かれたpタグの背景は赤くなり、”pタグ2つ目”と書かれたpタグの背景は青くなる。なお、nth-of-typeは子要素のうち擬似クラスがついたタグのみで考えるのにたいし、nth-childは子要素すべてを数えるので、”pタグ1つ目”と書かれたpタグの背景は緑色にならない(もし、h3タグがなければ緑色になる)。
なお、これは偶数を指定するeven(奇数ならodd)でも同様。
<ul>
<li>liタグ1つ目</li>
<li>liタグ2つ目</li>
<li>liタグ3つ目</li>
<li>liタグ4つ目</li>
<li>liタグ5つ目</li>
<li>liタグ6つ目</li>
</ul>
$('ul li:nth-child(even)').css('background-color', 'red');
$('ul li:even').css('background-color', 'blue');
例えば上記のようなコードがある場合、”liタグ1つ目”,”liタグ3つ目”,”liタグ5つ目”と書かれたliタグの背景は青くなり、”liタグ2つ目”,”liタグ4つ目”,”liタグ6つ目”と書かれたliタグの背景は赤くなる。
コメント