【jQuery】nth-child と eq()の違い

jqueryで要素を指定する際に「class li class」と指定する際にliのインデックス指定はどうしていますか？

今回はこの要素の指定について書いていきます。

jQueryでのnth-childの動き

nth-childはCSSでもおなじみですね。

jQueryでも要素を指定する際に使用することが可能です。

 $("li:nth-child(2)").addClass("textfont");

このように使用することができます。

nth-child(n)のnには何番目かという数字が入りますが、1から数えます。

また、該当するものすべてに適応されます。

下記の例を見てください。太字にしています。

国名のリストの２番目、日本の中の２番目と二つとも変化をしています。

jQueryでの eq の動き

eqはcssではないjqueryのみのものです。

nth-childと動きは似ているのですが、eqでは当てはまる最初の要素を取得してきます。

それに加えてインデックス番号は0からです。

使用方法が二通りあります。

まず一つ目はこちら

$("li:eq(1)").addClass("bgcolor");

上のnth-childと同様の書き方です。

もう一つはこちら

$("li").eq(1).addClass("textcolor");

要素書いた後に「.eq()」のように書く方法です。

どちらでも同じように動作します。

eqは0からインデックスが始まるので実質2番目の要素が選択されます。

それでは、１番目は何をつかんでいるでしょうか。

以下でボタンを押して確認してみてください。

ちなみに先ほどの背景が青色になるものをインデックス番号０にすると３都県含んだ日本が全部青くなります。

$("li:eq(1)").addClass("bgcolor");

実際に使う際

実際に使用する際にはリストの入れ子内の要素に対して行いたいことが多いと思います。

具体例では以下のようなものです。

$("li .weight").eq(0).addClass("textred");

このような書き方でもしっかりと動作します。

また、上では紹介しませんでしたがeqの場合インデックスに負の値も入力することができます。

企業サイトのメニュー的なイメージで作成してみましたので、見てみてください。

まとめ

特定要素に働くものは他にもあります。

偶数番目のものや奇数番目のものに働きかけるもの。最初の要素や最後の要素等も取得可能です。

それぞれしっかりと使いこなしたいですね。