質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

4回答

19822閲覧

要素の順番を入れ替える方法

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1グッド

1クリップ

投稿2018/03/01 09:29

編集2018/03/01 09:39

###■やりたいこと
次のHTMLがあるのですが、事情があって書き換えられず、javascriptで順番を変更できないかと思っています。

▼▼HTMLはこうなっている▼▼

html

1<div class="neko">ネコ</div> 2<div class="inu">イヌ</div> 3<div class="hamusuta">ハムスター</div>

▼▼javascriptでこうしたい▼▼

html

1<div class="neko">ネコ</div> 2<div class="hamusuta">ハムスター</div> 3<div class="inu">イヌ</div>

###■ダメだったこと
ただし、

・CSSのposition:absolute;で移動させる
・CSSのdisplay:flex;でorderをかける
・HTMLに番号idをつけてjavascriptでソートする

という方法ではなく、

・javascriptで指定class(inu)を、別の指定class(hamusuta)の後に持っていく

という方法を探しているのですけれど、、そのようなことは可能でしょうか?

ご教示いただけましたら幸いです。
よろしくお願いいたします。m(_ _)m

6EVILSTAR9👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答4

0

同じクラスの要素が複数ある場合は想定通りとならないかもしれません。

javascript

1const inu = document.getElementsByClassName('inu')[0]; 2const ham = document.getElementsByClassName('hamusuta')[0]; 3const oya = inu.parentNode; 4oya.insertBefore(ham, inu);

投稿2018/03/01 10:55

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/03/01 12:34

なるほど。入れ違いでベストアンサーは決めてしまいましたけれど、こちらもありがとうございます。
guest

0

なぜか上がっていたので Vanilla JS を。
入れ替えの意図が不明なのでテキストノードも変わらないようにしています。

JavaScript

1const swap = function(node1, node2) { 2 const parentNode = node2.parentNode; 3 const referenceNode = node2.nextSibling; 4 node1.after(node2); 5 parentNode.insertBefore(node1, referenceNode); 6};

https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/after

投稿2019/12/27 07:13

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

解決済みですが、汎用的な方法はこの3つに共通のクラスを指定して配列に入れてあげてそこで順番を入れ替えてアペンドするのも良いかと思います。

投稿2018/03/01 22:51

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/03/01 22:55

おはようございます。 ありがとうございます。解決済みとはいえ、ご自身のよりよいと思われた方法を教えてくださる優しさには感謝です。 よい一日を♪
guest

0

ベストアンサー

これでどうでしょう?

javascript

1$(function(){ 2 $('.hamusuta').after($('.inu')); 3}) 4

投稿2018/03/01 10:48

kszk311

総合スコア3404

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/03/01 11:02

いつもありがとうございます。 あら、アッサリですね! afterやappendでクラスを挿入するというのは以前やったのですが…そうか。クラスを挿入できるから、位置も移動できるんですもんね。 すごく難しく考えていました。。
recal

2019/12/27 06:23

jqueryじゃないですか
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問