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 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ライブラリを用意して読み込む必要があります。