jQuery DOM操作で要素を移動する(prev/next他)

jQueryのDOM操作で要素を取得して移動するサンプルです。

確認環境
・Windows10
・Google Chrome

移動	次と後の要素の移動(next/prev)
	親と子の要素の移動(parent/children)
	兄弟の要素を指定(siblings)

次と後の要素の移動(next/prev)

次の要素への移動と前の要素への移動のサンプルです。

<div id="b1">テスト1</div>
<div id="b2">テスト2</div>
<div id="b3">テスト3</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

	const d1 = $("#b2").next(); // b2からb3(弟)に移動
	d1.css("color","red"); // テスト3の文字が赤になる

	const d2 = $("#b2").prev(); // b2からb1(兄)に移動
	d2.css("color","blue"); // テスト1の文字が青になる

	const d3 = $("#b1").next().next(); // b1からb3に移動
	// d3.css("color","red"); // テスト3の文字が赤になる

	const d4 = $("#b3").prev().prev(); // b3からb1に移動
	// d4.css("color","blue"); // テスト3の文字が青になる

</script>

8行目は、next()で2行目から3行目(弟の要素)に移動しています。
11行目は、prev()で2行目から1行目(兄の要素)に移動しています。
14行目は、next()を2回続けて2つ前に移動しています。
17行目は、prev()で2回続けて2つ後に移動しています。
※CSSのcolorは継承するので下位の階層の文字の色も変わります。

結果は以下のようになります。

親と子の要素の移動(parent/children)

親と子の要素の移動のサンプルです。

<div id="a1">テスト0
	<div id="b1">テスト1
		<div id="c1">テスト2</div>
		<div id="c2">テスト3</div>
	</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

	const d1 = $("#b1").parent(); // b1からa1(親)に移動
	d1.css("color","red"); // テスト0の行に文字を赤にするCSSがつく※

	const d2 = $("#b1").children(); // b2からc1,c2(子)に移動
	d2.css("color","blue"); // テスト2,テスト3の文字が青になる

	const d3 = $("#c2").parent().parent(); // c2からa1に移動
	// d3.css("color","red"); // テスト0の行に文字を赤にするCSSがつく※

	const d4 = $("#a1").children().children(); // a1からc1,c2に移動
	// d4.css("color","blue"); // テスト2,テスト3の文字が青になる

</script>

11行目は、parent()で子から親に移動しています。
14行目は、children()で親から子に移動しています。
17行目は、parent()を2回続けて2つ上に移動しています。
20行目は、children()で2回続けて2つ下に移動しています。
※CSSのcolorは継承するので下位の階層の文字の色も変わります。

結果は以下のようになります。

兄弟の要素を指定(siblings)

兄弟の要素の移動のサンプルです。
siblingsは、男女の区別をつけない兄弟という意味です。

<div id="a1">テスト0
	<div id="b1">テスト1</div>
	<div id="b2">テスト2</div>
	<div id="b3">テスト3</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

	const d1 = $("#b1").siblings(); // b1以外の兄弟を指定
	d1.css("color","red"); // テスト2,テスト3の文字が赤になる

	const d2 = $("#b2").siblings(); // b2以外の兄弟を指定
	d2.css("color","blue"); // テスト1,テスト3の文字が青になる

</script>

10行目は、siblings()は、自要素以外の兄弟を指定します。

結果は以下のようになります。