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

Last Updated:2023年07月17日| , 6のコメント

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)の順序が変わります。

jQueryを使用してDIVの順序を変更

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

$(".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用求人/求職プラグインとしては、会員が広告を上げるフォームです。

WordPress ジョブマネージャ Plugin 1

上の画面で「勤務地域「フィールドを」설명「フィールドの下に移動したい場合は、プラグインソースを修正することは非常に簡単です。しかし、そうであれば、後でプラグインが更新されると問題が発生するでしょうか?

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

WordPress ジョブマネージャ Plugin 2

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

メモ:


6のコメント

コメント

  1. ちょっと昔の記事だと思うかもしれませんが…

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

    二つの使い方が少し異なります。

    insertAfterを使用した場合

    二番目の項目
    3番目の項目
    最初のエントリ

    このように行く

    appendToの場合、以下のよう.item.three内に移動になります。

    二番目の項目
    3番目の項目の最初の項目

    応答
  2. いつも良い情報よく読んでいます! 上記の情報を利用することが多かったのですが、ちょうど整理がうまくいっていますね! ありがとう:)

    応答
    • 訪問いただきありがとうございます。
      整理するのには少し時間がかかりますが、必要なときに参照することができており、第個人的にも良いようです。 (そうでなければ、必要に応じ探し回る場合があるますので。)
      楽しい一日を^^

      応答