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

jQuery

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

今回は、jQueryの「last」の使い方を解説していこうと思います。

この、「last」は「フィルタ」と呼ばれるもので、要素を指定する時に使います

記述する場所は、セレクタ内に記述します。

解説では、例とコードを使って解説していくので、すぐに理解してもらえると思います!



jQueryのセレクタ、lastの簡単な説明

  • lastはフィルタと呼ばれるもの
  • 末尾の要素を指定するもの
  • 「:last」と記述する

jQueryのセレクタ、lastの使い方

jQueryの「last」は、上でも説明したように、フィルタと呼ばれるセレクタのようなものです。

lastの特性は、「末尾の要素を指定する」ことです。

では、実際にコードで解説していきます。

<!--・<略>・-->
<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:last").css("color","red");
});
</script>
<!--・<略>・-->

注目して欲しいのは、13行目です。13行目には「$(“#meet li:last”).css(“color”, “red”):」と記述されています。

このコードの$(“#meet li:last”)の部分が、本題である「last」が使われている部分です。

lastは、「 末尾の要素を指定する 」なので、このコードの場合は、「idである#meetの子要素のliの末尾を指定」となります。

結果は↓

liタグの中で一番下である、「羊肉」が赤色に変わっているのが、分かります。

jQueryのセレクタ、lastの使い方 [まとめ]

今回は、jQueryのlastの使い方を紹介しました。

lastは、記述が少し覚えにくいような気がしますが、使える場面は、沢山あるので、是非覚えてみましょう!



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