jQueryを使用して要素（DIV）の位置を変更する

jQueryを使用してDIV要素の位置を変更したい場合は、参考にしてください。

jQueryを使用して要素（DIV）の位置を変更する

jQueryのサンプル1

例えば、次のように三つの項目がある場合は、HTML / PHPのソースコードを変更せずに、最初のDIVの項目を第二のDIVの項目後方に移動させたり、第三のDIVの項目戻る必要がある場合があります。

<div class="item one">첫 번째 항목</div>
<div class="item two">두 번째 항목</div>
<div class="item three">세 번째 항목</div>

この場合jQueryを使用すると、簡単に問題を解決することができます。 たとえば、次のようなスクリプトを使用すると、最初の項目がXNUMX番目の項目戻ることになります（参照).

$(".item.one").insertAfter(".item.three");

実行してみると次のように要素（element）の順序が変わります。

次のようなスクリプトを使用しても同様の結果を得ることができます。 （用いが若干異なる。以下のコメントを参照）

$(".item.one").appendTo(".item.three");

jQueryのサンプル2

次のようなパターンで ラベル과 入力 フィールドが繰り返されて表示される場合を考えてみましょう。

<div class="classCheckBox">
<input type="checkbox" id="checkboxId24" value="1" name="checkboxName[]" />
<label for="checkboxId24">1 </label>
</div>

この場合、チェックボックスの後にラベルが表示されます。 チェックボックスの前にラベルがくるようにするには：

$('.classCheckBox label').each(function() {
$(this).insertBefore( $(this).prev('input') );
});
// Reference: stackoverflow

これにより、ラベルがチェックボックスの前に配置されます。 実行結果を以下のjsfiddleで確認できます。

アプリケーション：

WordPressをカスタマイズしてみると WordPress コアファイルやテーマやプラグインのソースを修正したら、する場合がまれにあります。 しかし、 WordPress コアファイルやプラグインのソースを修正すると、後で問題が発生する可能性があります。 つまり、 WordPressやプラグインが更新されると変更された内容がすべて消えて更新されたファイルに置き換えられます。 だから WordPressは修正して使用するよりも、 フィルタ（Filter）/アクション（Action）を使用して機能を拡張する方法で使用したほうが正しいです。 そしてフィールドの位置を変えるでもなどの作業をソースから直接変更するよりも、フィルタ/アクションを使用するか、jQueryを使用すると、後日 WordPressやプラグインが更新されても問題が発生しなくなります。

たとえば、次の画面は、 WPジョブマネージャという WordPress用求人/求職プラグインとしては、会員が広告を上げるフォームです。

上の画面で、「勤務地域「フィールドを "설명"フィールドの下に移動させたい場合は、プラグインのソースを変更すると、非常に簡単です。しかし、その場合、今後のプラグインが更新されると、問題が発生することによ？修正した内容がないことになるのです。そうすれば再度変更を繰り返す必要がありますが、時間このしばらく経つと何を修正したのかよく覚えていない私をすることができ、このような変更が多い非常に面倒なことです。

このような状況では、上記のjQueryスクリプトを使用すると、非常に簡単に修正が可能です。

簡単なスクリプトで、上記の図のように、フィールドの順序を変更することができます。

メモ：

• WordPress add_filter理解
• insertAfter、after、appendTo、appendの違い（jsfiddle）
• .append（）、prepend（）、.after（）and .before（）の比較