概要
ここでは、エディターでのデザイン案作成時、要素の固定化を避け、要素移動を行う際に使えるjQueryメソッドについて記述します。(「固定化」については デザイン案不具合の原因となる動的要素の固定化について をご確認ください)
コンテクストメニューの「HTMLを編集」から要素のソースコードの書き換えを行うと、「replaceWith」などで書き換えが行われ、動的な要素を固定化してしまうことがあります。
また、コンテクストメニューを使わなくても、要素の位置を変更したいときに、
①元のページからHTMLをコピーし
②エディターで元の場所から移動したい要素を削除
③①を「append」や「before」などを使って、移動したい場所に要素追加する
といった編集を行うと、こちらも動的な要素を固定化してしまうことがあります。
有効なjQueryメソッド
移動させたい要素のidやclassを指定して移動します。
他の指定した要素の上に移動します。
下記のように記述します。$(".C").insertBefore(".A");
(要素CをAの上に移動する)
移動させたい要素のidやclassを指定して移動します。
他の指定した要素の下に移動します。
下記のように記述します。$(".C").insertAfter(".A");
(要素CをAの下に移動する)
移動させたい要素のidやclassを指定して移動します。
他の指定した要素の中の一番最後に移動します。
下記のように記述します。$(".C").appendTo(".A");
(要素CをAの中の一番最後に移動する)
移動させたい要素のidやclassを指定して移動します。
他の指定した要素の中の先頭に移動します。
下記のように記述します。$(".C").prependTo(".A");
(要素CをAの中の一番先頭に移動する)
0 コメント