ywork2020.com

Title

要素群の最初の要素だけを取得する

目次 (INDEX)

firstとは

ここで説明する first とは次の語句からなるjQueryのメソッドです。
first
読み: ファースト
意味: 第一の、一番目の、最初の

目次に戻る

firstメソッドの概要

このメソッドは、フィルター機能により、呼び出し元の要素群の中で最初の要素だけを取得します。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

このメソッドは引数を受け付けません。

var firstElement = $(Selector).first();

目次に戻る

サンプルコードと実行結果

ここでは、li 要素を題材にします。 3つあるリストアイテムの最初の要素だけを取得して背景色をライトピンクに設定します。

サンプルコード: CSS
<style>
	li{
		border: thin solid ##lightgray;
		margin: 0.1em;
		padding: 0 0.5em 0 0.5em;
	}
</style>
サンプルコード: HTML
<head>
	<style>...</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<ul>
		<li>First Element</li>
		<li>Element</li>
		<li>Last Element</li>
	</ul>
	<button id="idButton">Click</button>
	<script>...</script>
</body>
  • 06-10: ul (番号無しリストを表します。)
  • 07, 08 ,09: li (リストアイテムを表します。)
  • 11: button (ボタンです。クリックすると script 02 ~ 04 のコードが実行されます。)
サンプルコード: script
<script>
	$("#idButton").click(function(){
		$("li").first().css("background-color", "##lightpink");
	});
</script>
  • 02-04: $("#idButton").click(function(){処理}) (id="idButton" の要素がクリックされると 処理 を実行します。)
  • 03: $("li").first() (li 要素群の最初の要素だけを取得します。)
  • 03: css() (取得要素のスタイルを設定します。)
実行結果:
  • First Element
  • Element
  • Last Element

目次に戻る