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()は、自要素以外の兄弟を指定します。
結果は以下のようになります。
関連の記事
jQuery 要素を追加する(before/after/prepend/append)
jQuery 要素を削除するremoveとemptyの違い
jQuery 要素を移動する(appendTo/prependTo/insertAfter/insertBefore)
jQuery 要素を置き換える(replaceWith/replaceAll)
jQuery 要素で囲む/削除する(wrap/wrapAll/unwrap/wrapInner)