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


もしかしたら、jQueryの基本中の基本なのかもしれませんが、最近知ったので、一応メモ。

jQueryのセレクタ指定において、:nth-child(n)は要素を1始まりで取得しますが、:eq(n)は0始まりなようです。

例えば以下のようなHTMLソースがある場合、

以下のようなコードを書くと、

“liタグ1つ目”と書かれたliタグの背景は赤くなり、”liタグ2つ目”と書かれたliタグの背景は青くなります。

憶え方としては、CSSの擬似クラスにもある指定方法は1始まりで、jQueryオリジナルの指定は0始まりとのこと。例えば、CSSにもある:nth-of-typeも1始まり。

上記のようなコードの場合は、”pタグ1つ目”と書かれたpタグの背景は赤くなり、”pタグ2つ目”と書かれたpタグの背景は青くなる。なお、nth-of-typeは子要素のうち擬似クラスがついたタグのみで考えるのにたいし、nth-childは子要素すべてを数えるので、”pタグ1つ目”と書かれたpタグの背景は緑色にならない(もし、h3タグがなければ緑色になる)。

なお、これは偶数を指定するeven(奇数ならodd)でも同様。

例えば上記のようなコードがある場合、”liタグ1つ目”,”liタグ3つ目”,”liタグ5つ目”と書かれたliタグの背景は青くなり、”liタグ2つ目”,”liタグ4つ目”,”liタグ6つ目”と書かれたliタグの背景は赤くなる。

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

コメントを残す

メールアドレスが公開されることはありません。