ywork2020.com

Title

インデックス番号で要素を取得する

目次 (INDEX)

eqとは

ここで説明する eq とは次の語句からなるjQueryのメソッドです。
equation
読み: エクエイション
意味: 等しくすること、方程式

目次に戻る

eqメソッドの概要

このメソッドは、セレクターにより抽出された要素の中から、メソッドの引数であるインデックス番号が該当する要素を特定します。

つまり、セレクターで要素群を絞り込み、その要素群のインデックス番号を指定して要素を特定するといったものです。

メソッドの引数にはインデックス番号を数値で指定します。 これはシンプルな指定の方法ですが、シンプル故に引数には数式や関数の戻り値を使用することになるでしょう。

目次に戻る

構文

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

var objElement = $(Selector).eq(numIndex);

目次に戻る

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

ここではdiv要素を5つ並べたものを題材にします。

この要素らの中心に配置される要素のインデックス番号を計算式で導き出し、背景色を青に設定します。

ここではインデックスが 2 の要素が該当しますので背景色の変更が行われますが、 仮にdiv要素が4つしかない場合、中心に配置される要素が無いので処理は行われません。

サンプルコード: CSS
<style>
	div{
		display: inline-block;
		border: thin solid currentColor;
		margin: 10px;
		height: 50px;
		width: 50px;
	}
</style>
サンプルコード: HTML
<head>
	<style>...</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<script>...</script>
</body>
  • 06 ~ 10: div (div要素を5つ用意しました。)
サンプルコード: script
<script>
	const centerIndex = function(elmLength){
		if(elmLength % 2 != 0){
			return Math.floor(elmLength / 2);
		}
	}
	let selector = "div";
	$(selector).eq(centerIndex($(selector).length)).css("background-color","##blue");
</script>
  • 02-06: centerIndex (関数を作成しました。引数に与えた数値が奇数の場合は処理は発生しません。引数が偶数なら、その引数を2で除算して最小の整数として結果を返します。)
  • 07: selector (変数です。セレクターに指定する文字列を指定しています。)
  • 08: eq(centerIndex($(selector).length)) (eq(index)の部分で、インデックス番号から要素を特定しています。index の値は作成した関数で取得します。)
実行結果:

目次に戻る