jQueryのセレクタの一種である。eqの使い方を解説します![例とコードで解説します]

jQuery

皆さん、こんにちは!ソウシ(@gomasio2018)と申します。

今回は、jQueryの「eq」の使い方について、解説していきます。

eqは、セレクタの一種であり、「フィルタ」と呼ばれるもので、要素を指定する時に使います。

解説では、例とコードを使って解説するので、すぐに理解できると思います。



jQueryのセレクタの一種である、eqの簡単な説明

  • フィルタと呼ばれるもの。
  • 0から数えて、何番目かの要素を指定する。
  • 「:eq(番号)」と記述する。

jQueryのセレクタの一種である、 eqの使い方

「eq」の使い方は、上でも説明したように、要素を指定するのに使います。

特性は、「0から数えて、何番目かの要素を指定する」という特性をもっています。

言葉で説明しても、とても分かりにくいので、実際に、コードで説明していきます。

<!--・<略>・-->
<h1 id="title1">肉の種類</h1>
<ul id="meet">
	<li id="beef">牛肉</li>
	<li id="tikin">鶏肉</li>
	<li id="pork">豚肉</li>
	<li id="ramu">羊肉</li>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function(){
$("#meet li:eq(2)").css("color","red");
});
</script>
<!--・<略>・-->

注目して欲しい部分は、13行目になります

13行目に記述されているのは、「$(“meet li:eq(2)”).css(“color”, “red”);」と記述されています。

この、コードの「$(“#meet li:eq(2)”)」の部分が、本題となる部分です。

これは、「idであるmeetの子要素の最初のliタグから数えて3番目を指定」という意味になります。

っとここで、感の鋭い人は、すぐに気づいたかもしれません。

何故、eq(2)と記述しているのに、上から3番目やねん!」と。

これは、eqでの数え方が「1、2、3」ではなく「0、1、2」と0から数えるからなのです。

なので、上から3番目の場合は、「eq(2)」と記述するのです。

では、実際に上のコードの挙動を見てみましょう。

ちゃんと、liタグの上から3番目が赤く表示されていますね。

eqでの数え方では、「牛肉=0、鶏肉=1、豚肉=2、羊肉=3」となります。

jQueryのセレクタの一種である、 eqの使い方[まとめ]

今回は、jQueryのeqの使い方を記事にしました。

eqでの要素の指定は、とても簡単で、使えない場面がないので、とても重宝します。

とはいえ、簡単に使えるといっても、eqの数え方は0から始まるということを忘れないようにしましょう!



人気記事プログラミングスクールである「TECH::EXPERT」が素晴らしくオススメな理由[あの有名人も絶賛!]