jQueryのセレクタ指定においてnth-childは1始まりだが、eqは0始まり

もしかしたら、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タグの背景は赤くなる。

実行サンプル：jQueryのnth-childは1始まりで、eqは0始まり