jQueryで次の要素、手前の要素をを取得するサンプルコード

2023-07-08

jQueryを使用して次の要素を取得するためのサンプルコードは次のようになります。

<!DOCTYPE html>
<html>
<head>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div class="container">
	<h2>要素取得のサンプル</h2>
	<p>最初の段落</p>
	<p>次の段落</p>
	<p>最後の段落</p>
</div>

<script>
	$(document).ready(function() {
	// 最初の段落を取得
	var firstParagraph = $('p:first');
	console.log(firstParagraph.text());

	// 次の段落を取得
	var nextParagraph = firstParagraph.next();
	console.log(nextParagraph.text());

	// 最後の段落を取得
	var lastParagraph = nextParagraph.next();
	console.log(lastParagraph.text());
	});
</script>

</body>
</html>

この例では、<div>要素内の段落（<p>要素）を操作しています。jQueryのセレクタを使用して最初の段落を取得し、next()メソッドを使用して次の要素を取得し、さらに次の要素を取得しています。それぞれの段落のテキストはtext()メソッドを使用してコンソールに表示されます。

注意点として、この例ではjQueryのバージョン3.6.0をCDN経由で読み込んでいます。適切なバージョンを使用するか、自身でjQueryライブラリを用意して読み込む必要があります。

手前の要素を取得するサンプルコード

jQueryを使用して前の要素を取得するためのサンプルコードは次のようになります。

<!DOCTYPE html>
<html>
<head>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div class="container">
	<h2>要素取得のサンプル</h2>
	<p>最初の段落</p>
	<p>次の段落</p>
	<p>最後の段落</p>
</div>

<script>
	$(document).ready(function() {
	// 最後の段落を取得
	var lastParagraph = $('p:last');
	console.log(lastParagraph.text());

	// 前の段落を取得
	var previousParagraph = lastParagraph.prev();
	console.log(previousParagraph.text());
	});
</script>

</body>
</html>

この例では、<div>要素内の段落（<p>要素）を操作しています。jQueryのセレクタを使用して最後の段落を取得し、prev()メソッドを使用して前の要素を取得しています。前の段落のテキストはtext()メソッドを使用してコンソールに表示されます。

同様に、この例でもjQueryのバージョン3.6.0をCDN経由で読み込んでいます。適切なバージョンを使用するか、自身でjQueryライブラリを用意して読み込む必要があります。