「HTMLの構造は変えられないけど、この要素を別の場所に移動したい」ということがあったので、jQueryで実装する方法を紹介します。
jQueryでHTMLの要素を特定の場所に移動する方法
やり方は「HTML要素を追加する系のメソッドを使って、既存の要素を特定の場所に挿入し直す」という感じです。
例えばbefore()は本来指定した要素の前に要素を追加するメソッドですが、既存の要素を指定した位置に挿入し直すことで位置を移動できるわけです。
以下の例ではアイテムの2番目の前に4番目を移動してみます。わかりやすいように色を赤にしています。
HTML
<ul class="list">
<li class="item01">1</li>
<li class="item02">2</li>
<li class="item03">3</li>
<li class="item04" style="color: red">4</li>
<li class="item05">5</li>
</ul>
jQuery
$('.item02').before($('.item04'));
結果はこんな感じ。ちゃんと.item02の前に.item04が移動しているのがわかります。
See the Pen
VwKQdKx by wagashi000327 (@wagashi000327)
on CodePen.
特定の要素の直下に移動したい場合はprepend()が便利です。
jQuery
$('.list').prepend($('.item04'));
結果はこんな感じ。.listの直下に.item04が移動しているのがわかります。
See the Pen
xxEYJaN by wagashi000327 (@wagashi000327)
on CodePen.
こんな感じでHTMLの要素を追加する系のjQueryメソッドを使えば、HTMLを触らずに既存の要素を好きな位置に移動させることができます。
他にはこんなメソッドでも移動できます。
before()/after()append()/prepend()insertBefore()/insertAfter()
各メソッドの使い勝手は若干違うので好きなものを使えばokです。
まとめ
jQueryによって動的に位置を変更する方法はあまり情報が出てこなかったので記事にしてみました。HTML要素を追加する系のメソッドは並び替えもできちゃうんですね。
参考になったら幸いです。
