jQueryで兄弟要素をすべて取得するサンプルコード
以下は、jQueryを使用して兄弟要素をすべて取得するサンプルコードです。
<!DOCTYPE html>
<html>
<head>
<title>jQuery 兄弟要素の取得</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div>
<p>兄弟要素1</p>
<p>兄弟要素2</p>
<p>兄弟要素3</p>
<p>兄弟要素4</p>
</div>
<script>
$(document).ready(function() {
// 兄弟要素を取得
var siblings = $("p").siblings();
// 取得した兄弟要素を表示
siblings.each(function() {
console.log($(this).text());
});
});
</script>
</body>
</html>
この例では、$("p").siblings() を使用して p 要素の兄弟要素を取得しています。siblings() メソッドは、指定した要素の直前または直後にある兄弟要素を選択します。
取得した兄弟要素は each() メソッドを使用して反復処理され、コンソールに表示されます。この例では、div要素内のすべてのp要素が対象の兄弟要素です。