フーノページ

JavaScript : 要素の順番を逆にする。

〽️「見た目」だけならflexだが‥ 〽️insertBeforeメソッド。 〽️for文で逆順に。 〽️for文1発で便利。




webサイト制作ついてのまとめページはこちら⬆︎。

syntax。

for (i = 1; i < children.length; i++) bb{ bbparent.insertBefore(children[i],children[0]); bb }

こんにちは、「ふ」です。
HTMLで、要素を逆から並べたいとき、どうしていますか?

① CSSのflexを使う。
② 要素を配列化し、逆ソート。


①は実装したい内容によっては、少し問題が。②は若干めんどくさい。
〜今回はJavaScriptを使って、もっと簡単に「要素の順番を逆にする」方法について紹介していきます。

「見た目」だけならflexだが‥


このような⬇︎サンプルを用意しました。
上から順に、「要素1〜4」が並んでいます。

・要素1

・要素2

・要素3

・要素4



◼︎ HTML

<div id = "sample">

・要素1

・要素2

・要素3

・要素4

</div>

単に「見た目」の並び順を逆転させるだけであれば、flexで囲んでdirectionを操作するという、よく見られる方法があります。

◼︎ CSS

#sample { display:flex; 「「1flex-direction:column-reverse;」」 }

・要素1

・要素2

・要素3

・要素4

flex-directionで「縦方向に逆転させる」としたので、要素の並び順が逆になりました。

これだけならいいのですが‥




後からアクセスする場合。

ここで、「1番目の要素に背景色をつける」という処理をしたい場合、どうなるのでしょう。
JavaScriptでやってみます。

◼︎ JavaScript

「「3//親要素を取得」」 const sample = document.getElementById("sample"); 「「3//1番目の要素にbgcolor」」 sample.children[0].style.backgroundColor = "yellow";

子要素の取得は、「 element.children[n] 」で行います。
結果はどうでしょうか。

・要素1

・要素2

・要素3

・要素4

ん?
1番上に表示されている「要素4」に背景色をつけるつもりが、1番下の「要素1」に施されてしまいました。


そうです。flex-directionはあくまで「見た目の並べ順」を指定しているにすぎません。
内部構造的な要素の順番は、元々の「要素1→→4」のままになっているので、このような結果になってしまうのですね。
並べ替えたあとから、個々の要素にアクセスする場合にはとても不便です💧


見た目上ではなく、内部構造的に要素を並び替えるとしたら、
どうすれば・・

insertBeforeメソッド。


親要素.insertBefore(挿入する要素,ポイントとなる要素);

JavaScriptの「insertBefore」メソッドは、要素を任意の場所に挿入することができる、便利なものです。
実行すると、CSSの「見た目指定」ではなく内部構造レベルで要素の順番が差し変わります。

・要素1

・要素2

・要素3

・要素4

先ほどの背景色は一旦キャンセル。insertBeforeを使って、「要素2」を先頭に移してみます。

◼︎ JavaScript

const sample = document.getElementById("sample"); 「「1sample.insertBefore(sample.children[1],sample.children[0]);」」

・要素1

・要素2

・要素3

・要素4

とりあへず、ブラウザではこのようになっています。

検証。

先ほどのflex-directionでは、見た目の並び順が変更されたに過ぎませんでした。
今回は本当に内部的に順序変更されたのでしょうか?アクセスすることで確かめてみましょう。

先ほどと同じく、「1番目の要素」に背景色を付けてみます。

◼︎ JavaScript

sample.children[0].style.backgroundColor = "yellow";

・要素1

・要素2

・要素3

・要素4

こんどはアクセスと見た目が一致しました。
children[1]の「要素2」がchildren[0]として扱われていて、内部的にも要素の順序がちゃんと変更されていることがわかります。

for文で逆順に。


・要素1

・要素2

・要素3

・要素4

先ほどの状態から今度はchildren[2]の「要素3」を先頭にしてみます。

◼︎ JavaScript

const sample = document.getElementById("sample"); sample.insertBefore(sample.children[1],sample.children[0]); 「「1sample.insertBefore(sample.children[2],sample.children[0]);」」

・要素1

・要素2

・要素3

・要素4

「要素3」が先頭になりました。
このようにして、「2番目以降の要素」を順に「1番目の要素の上」に移動させていくと、最終的に要素全体の並び順が逆転しますね?

〜じゃあfor文にして、ひとまとめにしてしまいましょう。
コード全体を⬇︎のように書き換えます。

◼︎ JavaScript

const sample = document.getElementById("sample"); for (i = 1; i < sample.children.length; i++) { sample.insertBefore(sample.children[i],sample.children[0]); }

・要素1

・要素2

・要素3

・要素4

並び順が完全に逆になりました。
これで要素の数に関わらず、「親要素を取得 → for文1発」で順序を逆転させることができますね!

for文1発で便利。


Jsで要素の並び順を逆にする方法。
1度配列に起こして再度子要素として追加、というのはみなさん記事にされていたのですが、意外とこのやりかたは紹介されていませんでした。
そこで今回記事を投下することに。for文1発ですぐに使えるので、とても便利だと思います。

最後までお読みくださり、ありがとうございました。フーノページではベクターソフト、SVG、webの小ワザと忙しいのですが(笑)、これからも面白い/便利なネタがあれば発信していきたいと思います。ではまた〜 🎵



◼︎ 関連(?)記事











「ふ」です。

swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。