/

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

【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から数えます。

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

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

See the Pen BajyYzY by s-Kuma (@kumatechlab) on CodePen.

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

jQueryでの eq の動き

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

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

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

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

まず一つ目はこちら

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

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

もう一つはこちら

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

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

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

See the Pen BajyYzY by s-Kuma (@kumatechlab) on CodePen.

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

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

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

See the Pen BajyYzY by s-Kuma (@kumatechlab) on CodePen.

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

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

実際に使う際

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

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

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

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

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

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

See the Pen oNbgqzE by s-Kuma (@kumatechlab) on CodePen.

まとめ

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

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

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