183

2 つの要素を jQuery で簡単に交換できますか?

可能であれば、1行でこれを行うことを検討しています。

select 要素があり、オプションを上下に移動するための 2 つのボタンがあり、すでに選択済みセレクターと宛先セレクターが配置されています。if を使用しますが、もっと簡単な方法があるかどうか疑問に思っていました。

4

22 に答える 22

247

jQuery のみを使用してこれを解決する興味深い方法を見つけました。

$("#element1").before($("#element2"));

また

$("#element1").after($("#element2"));

:)

于 2011-12-26T18:19:44.743 に答える
79

Paulo の言うとおりですが、なぜ彼が関係する要素を複製しているのかはわかりません。これは実際には必要ではなく、要素とその子孫に関連付けられている参照やイベント リスナーが失われます。

これは、単純な DOM メソッドを使用した非クローン バージョンです (jQuery には、この特定の操作を簡単にするための特別な関数が実際には存在しないため)。

function swapNodes(a, b) {
    var aparent = a.parentNode;
    var asibling = a.nextSibling === b ? a : a.nextSibling;
    b.parentNode.insertBefore(a, b);
    aparent.insertBefore(b, asibling);
}
于 2009-03-30T18:25:45.167 に答える
73

いいえ、ありませんが、1 つ作成できます。

jQuery.fn.swapWith = function(to) {
    return this.each(function() {
        var copy_to = $(to).clone(true);
        var copy_from = $(this).clone(true);
        $(to).replaceWith(copy_from);
        $(this).replaceWith(copy_to);
    });
};

使用法：

$(selector1).swapWith(selector2);

これは、セレクターがそれぞれ 1 つの要素にのみ一致する場合にのみ機能することに注意してください。そうしないと、奇妙な結果が生じる可能性があります。

于 2009-03-30T18:13:14.870 に答える
11

2つのクローンは必要ありません。1つで十分です。Paolo Bergantinoの答えをとると、次のようになります。

jQuery.fn.swapWith = function(to) {
    return this.each(function() {
        var copy_to = $(to).clone(true);
        $(to).replaceWith(this);
        $(this).replaceWith(copy_to);
    });
};

もっと速くする必要があります。2つの要素のうち小さい方を渡すと、処理が高速化されます。

于 2010-02-04T16:44:42.497 に答える
8

以前はこのようなテクニックを使用しました。http://mybackupbox.comのコネクタリストに使用しています 

// clone element1 and put the clone before element2
$('element1').clone().before('element2').end();

// replace the original element1 with element2
// leaving the element1 clone in it's place
$('element1').replaceWith('element2');
于 2012-02-26T06:00:32.847 に答える
3

複数選択した選択肢を上下に移動できる機能を作りました

$('#your_select_box').move_selected_options('down');
$('#your_select_boxt').move_selected_options('up');

依存関係:

$.fn.reverse = [].reverse;
function swapWith() (Paolo Bergantino)

最初に、最初/最後に選択されたオプションが上/下に移動できるかどうかをチェックします。次に、すべての要素と呼び出しをループします

swapWith(element.next() または element.prev())

jQuery.fn.move_selected_options = function(up_or_down) {
  if(up_or_down == 'up'){
      var first_can_move_up = $("#" + this.attr('id') + ' option:selected:first').prev().size();
      if(first_can_move_up){
          $.each($("#" + this.attr('id') + ' option:selected'), function(index, option){
              $(option).swapWith($(option).prev());
          });
      }
  } else {
      var last_can_move_down = $("#" + this.attr('id') + ' option:selected:last').next().size();
      if(last_can_move_down){
        $.each($("#" + this.attr('id') + ' option:selected').reverse(), function(index, option){
            $(option).swapWith($(option).next());
        });
      }
  }
  return $(this);
}
于 2011-01-27T14:34:49.483 に答える
3

クローニングなしの別のもの：

交換する実際の要素と公称要素があります。

            $nominal.before('<div />')
            $nb=$nominal.prev()
            $nominal.insertAfter($actual)
            $actual.insertAfter($nb)
            $nb.remove()

theninsert <div> beforeとremoveafter は、常に befor 要素があることを確認できない場合にのみ必要です (私の場合はそうです)

于 2014-09-14T17:10:27.053 に答える
2

jQueryプラグイン「Swapable」を見てください

http://code.google.com/p/jquery-swapable/

「Sortable」に基づいて構築されており、並べ替え可能 (ドラッグ アンド ドロップ、プレースホルダーなど) のように見えますが、ドラッグ アンド ドロップの 2 つの要素のみを交換します。他のすべての要素は影響を受けず、現在の位置にとどまります。

于 2010-07-03T21:42:55.357 に答える
1

jQueryオブジェクトで選択された2つのアイテムを交換する場合は、このメソッドを使用できます

http://www.vertstudios.com/blog/swap-jquery-plugin/

于 2010-09-12T09:04:13.367 に答える
1

私はこのスニペットでそれをやった

// Create comments
var t1 = $('<!-- -->');
var t2 = $('<!-- -->');
// Position comments next to elements
$(ui.draggable).before(t1);
$(this).before(t2);
// Move elements
t1.after($(this));
t2.after($(ui.draggable));
// Remove comments
t1.remove();
t2.remove();
于 2015-03-14T10:03:08.307 に答える
1

データベースで .after() .before() を使用して obj の順序を変更するためのテーブルを作成したので、これは私が実験したものです。

$(obj1).after($(obj2))

obj2 の前に obj1 を挿入し、

$(obj1).before($(obj2))

その逆を行います。

したがって、obj1 が obj3 の後にあり、obj2 が obj4 の後にある場合、および obj1 と obj2 の場所を変更する場合は、次のようにします。

$(obj1).before($(obj4))
$(obj2).before($(obj3))

これでうまくいくはずですが、.prev() と .next() を使用して obj3 と obj4 を見つけることができます。

于 2016-11-11T03:31:43.287 に答える
0

nodeA と nodeB が兄弟<tr>で、同じものを 2 つ使用する場合は、それらを<tbody>使用$(trA).insertAfter($(trB))または$(trA).insertBefore($(trB))交換することができます。それは私にとってはうまくいきます。前に呼び出す必要はありません$(trA).remove()。それ以外の場合は、いくつかのクリックイベントを再バインドする必要があります$(trA)

于 2017-08-26T03:36:42.853 に答える
-2

とても簡単にできると思います。たとえば、次の構造があるとしましょう：..。

<div id="first">...</div>
<div id="second">...</div>

結果は次のようになります

<div id="second">...</div>
<div id="first">...</div>

jquery：

$('#second').after($('#first'));

お役に立てば幸いです。

于 2013-02-10T17:11:28.540 に答える
-2

最良のオプションは、 clone() メソッドを使用してそれらを複製することです。

于 2009-03-30T19:03:08.650 に答える