ベストセラー人気 WordPress テーマTop 30 詳細

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

Last Updated:2022年9月15日| 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. いつも良い情報よく読んでいます! 上記の情報を利用する場合が多かったのにちょうど整理がよくなっていますね! ありがとうございます????

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

      応答