ホームページ制作　オフィスオバタ

Jqueryでliの要素を指定してテキストを取得する。

OBATA

HTMLで「タブメニュー」を作ることがあります。
その際に、押したタブに該当する部分の表示切り替えをします。

具体的には全非表示後にタブに該当する部分を表示切り替えしています。

今回、この部分で考察することがあったので、忘備録として記録いたします。

まずはともあれ作ってみたものがこちら。

サンプルはこちらです。

サンプルをご覧いただくと、LIリストとボタンがあります。
ボタンを押すと、LIタグが選択され下部にLIタグのテキストが表示されます。

このソースはこちらです。


<!doctype html>
<html>
<head>
<meta charset="shift_jis">
<title>Jqueryで要素指定する</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
function selectli(no)
{
	// スタイルシートをクリア
	$("ul li").removeClass("select");

	// 該当のliタグに選択CSSをセット
	$("ul li").eq(no).addClass("select");

	// liの文字を取得
	$msg = $("ul li").eq(no).text();

	// liの文字を画面に表示
	$("#disp").text("「"+$msg+"」が選択されました。");
}
</script>
<style type="text/css">
body
{
	text-align: center;
}
ul 
{
	padding: 20px;
	width: 400px;
	margin-right: auto;
	margin-left: auto;
	border: 1px solid #CCC;
}

li
{
	margin-left: 30px;
	padding-top: 4px;
	padding-bottom: 4px;
	text-align: left;
}
.select
{
	color: #6CF;
	border: 3px solid #6CF;
}

input[type=button]
{
	padding: 10px;
}

#disp
{
	font-size: 30px;
	color: #6CF;
	padding-top: 30px;
}

</style>
</head>

<body>

<ul>
<li>1つめの要素</li>
<li>2つめの要素</li>
<li>3つめの要素</li>
<li>4つめの要素</li>
<li>5つめの要素</li>
</ul>
<input name="" type="button" value="1つめを選択します" onClick="selectli(0)">
<input name="" type="button" value="2つめを選択します" onClick="selectli(1)">
<input name="" type="button" value="3つめを選択します" onClick="selectli(2)">
<input name="" type="button" value="4つめを選択します" onClick="selectli(3)">
<input name="" type="button" value="5つめを選択します" onClick="selectli(4)">
<div id="disp"></div>

</body>
</html>

解説をすると、inputタグからJavascriptのサブルーチンコールをしています。

inputタグとliタグが1対1の関係なので、inputタグサブルーチンに「数字」を指定することで該当するliタグを指定しています。

ところが、この方法には一つの懸念がありました。

汎用性を高めるためinputタグには細工を入れないようにしたい

inputタグに直接スクリプトを記述してliタグを指定する方法は汎用性が低いです。

なぜならばliタグが100個あるような場合、引数の数字間違いが発生する可能性があるためです。

liタグにはスクリプトの細工はせず、同じことを実現する必要がありました。

ということで今一度作り直してみました。

ということで、liタグに細工を入れずに作ってみました。
サンプルはこちらです。

見た目はまったく同じですが、inputタグには細工が入っていません。

ソースはこちら


<!doctype html>
<html>
<head>
<meta charset="shift_jis">
<title>Jqueryで要素指定する</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function()
{
	$("input").click(function()
	{
		// スタイルシートをクリア
		$("ul li").removeClass("select");

		// ①何個目の要素かを取得
		var no = ($(this).index() -1);

		// ②該当のliタグに選択CSSをセット
		$("ul li").eq(no).addClass("select");

		// ③liの文字を取得
		$msg = $("ul li").eq(no).text();

		// liの文字を画面に表示
		$("#disp").text("「"+$msg+"」が選択されました。");
	});
});
</script>
<style type="text/css">
body
{
	text-align: center;
}
ul 
{
	padding: 20px;
	width: 400px;
	margin-right: auto;
	margin-left: auto;
	border: 1px solid #CCC;
}

li
{
	margin-left: 30px;
	padding-top: 4px;
	padding-bottom: 4px;
	text-align: left;
}
.select
{
	color: #6CF;
	border: 3px solid #6CF;
}

input[type=button]
{
	padding: 10px;
}

#disp
{
	font-size: 30px;
	color: #6CF;
	padding-top: 30px;
}

</style>
</head>

<body>

<ul>
<li>1つめの要素</li>
<li>2つめの要素</li>
<li>3つめの要素</li>
<li>4つめの要素</li>
<li>5つめの要素</li>
</ul>
<input name="" type="button" value="1つめを選択します">
<input name="" type="button" value="2つめを選択します">
<input name="" type="button" value="3つめを選択します">
<input name="" type="button" value="4つめを選択します">
<input name="" type="button" value="5つめを選択します">
<div id="disp"></div>

</body>
</html>

ソースすべてを見るとわかりにくいものです。
ばらして部分的に解説いたします。

解説①HTMLタグ部分

<ul>
<li>1つめの要素</li>
<li>2つめの要素</li>
<li>3つめの要素</li>
<li>4つめの要素</li>
<li>5つめの要素</li>
</ul>
<input name="" type="button" value="1つめを選択します">
<input name="" type="button" value="2つめを選択します">
<input name="" type="button" value="3つめを選択します">
<input name="" type="button" value="4つめを選択します">
<input name="" type="button" value="5つめを選択します">

HTMLタグ部分からは、スクリプトの呼び出しをしないようになっています。
これならばタグの数を増やしても、パラメータの打ち間違いが発生しません。
汎用性が高くなります。

解説②Jquery部分



(function()
{
	$("input").click(function()
	{
		// スタイルシートをクリア
		$("ul li").removeClass("select");

		// ①何個目の要素かを取得
		var no = ($(this).index() -1);

		// ②該当のliタグに選択CSSをセット
		$("ul li").eq(no).addClass("select");

		// ③liの文字を取得
		$msg = $("ul li").eq(no).text();

		// liの文字を画面に表示
		$("#disp").text("「"+$msg+"」が選択されました。");
	});
});

Jquery部分を解説いたします。
大筋の流れは同じですが、大きく変えた場所が1つあります。
それは、

inputタグに対応するliタグを引数から要素数にかえました。

どういうことかというと、押されたinputタグが何個目のものかを取得し、何番目のliタグを処理すればよいかを判断しています。

具体的には以下のようになります。

①要素数を取得

①の部分でinputタグの何番目の要素が押されたかを取得しています。


// ①何個目の要素かを取得
var no = ($(this).index() -1);

.index()関数は、要素数を取得する場合に使用します。
似たような関数に.eq()がありますが、これだと取得できません。

-1をしているのは、liの要素は0から始まるのに対し、inputの要素は1から始まるためです。
1つずれているので調整しています。

②対応するliタグにスタイルシートを設定

②の部分でliタグにスタイルシートを設定しています。


// ②該当のliタグに選択CSSをセット
$("ul li").eq(no).addClass("select");

①で求めた要素数をliタグで指定しています。
この場合は.eq()関数を使用して指定しています。

ちなみに、.index()関数でやるとうまく動作しませんでした。

③liタグのテキストを取得

③の部分でliタグに記載されているテキストを取得しています。


// ③liの文字を取得
$msg = $("ul li").eq(no).text();

こちらも①で求めた要素数を.eq()関数を使い対応するliタグのテキストを取得しています。

Jqueryで要素指定をする場合のまとめ

今回やってみて感じたことは以下の通りです。

どちらもタグの要素数を扱う関数のため、混同しやすいですがgetとsetの違いがあることがわかりました。
最初この区別がつかず、うまく動作しないと悩みました。

なせば何とかなるものです。

今回のものをタブに応用する場合は、スタイルシートを「表示」「非表示」に変更すれば実現できます。

また本記事がお役に立てば幸いです。

モバイルバージョンを終了