Có một hàm jQuery gốc để chuyển đổi các phần tử không?

Tôi có thể dễ dàng trao đổi hai phần tử với jQuery không?

Tôi đang tìm cách để làm điều này với một dòng nếu có thể.

Tôi có một yếu tố được chọn và tôi có hai nút để di chuyển lên hoặc xuống các tùy chọn và tôi đã có sẵn các bộ chọn đích và chọn, tôi làm điều đó với một if, nhưng tôi tự hỏi liệu có cách nào dễ dàng hơn không.

Tôi đã tìm thấy một cách thú vị để giải quyết vấn đề này chỉ bằng jQuery:

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

hoặc là

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

:)

Paulo nói đúng, nhưng tôi không chắc tại sao anh ta nhân bản các yếu tố liên quan. Điều này không thực sự cần thiết và sẽ mất bất kỳ tài liệu tham khảo hoặc người nghe sự kiện nào liên quan đến các yếu tố và con cháu của họ.

Đây là phiên bản không nhân bản bằng các phương thức DOM đơn giản (vì jQuery không thực sự có bất kỳ chức năng đặc biệt nào để giúp thao tác cụ thể này dễ dàng hơn):

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);
}

Không, không có, nhưng bạn có thể đánh một cái:

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);
    });
};

Sử dụng:

$(selector1).swapWith(selector2);

Lưu ý điều này chỉ hoạt động nếu các bộ chọn chỉ khớp với 1 phần tử mỗi phần, nếu không nó có thể cho kết quả lạ.

Có rất nhiều trường hợp cạnh tranh cho vấn đề này, không được xử lý bởi câu trả lời được chấp nhận hoặc câu trả lời của bobince. Các giải pháp khác liên quan đến nhân bản đang đi đúng hướng, nhưng nhân bản là tốn kém và không cần thiết. Chúng tôi muốn sao chép, vì vấn đề muôn thuở là làm thế nào để hoán đổi hai biến, trong đó một trong các bước là gán một trong các biến cho biến tạm thời. Việc chuyển nhượng, (nhân bản), trong trường hợp này là không cần thiết. Đây là một giải pháp dựa trên jQuery:

function swap(a, b) {
    a = $(a); b = $(b);
    var tmp = $('<span>').hide();
    a.before(tmp);
    b.before(a);
    tmp.replaceWith(b);
};

Nhiều câu trả lời đơn giản là sai đối với trường hợp chung, những câu trả lời khác phức tạp không cần thiết nếu thực tế chúng thậm chí còn hoạt động. JQuery .beforevà .aftercác phương thức thực hiện hầu hết những gì bạn muốn làm, nhưng bạn cần một phần tử thứ 3 theo cách mà nhiều thuật toán trao đổi hoạt động. Điều này khá đơn giản - tạo một phần tử DOM tạm thời làm trình giữ chỗ trong khi bạn di chuyển mọi thứ xung quanh. Không cần phải nhìn vào cha mẹ hay anh chị em, và chắc chắn không cần phải nhân bản ...

$.fn.swapWith = function(that) {
  var $this = this;
  var $that = $(that);

  // create temporary placeholder
  var $temp = $("<div>");

  // 3-step swap
  $this.before($temp);
  $that.before($this);
  $temp.after($that).remove();

  return $this;
}

1) đặt div tạm thời temptrướcthis

2) di chuyển thistrướcthat

3) di chuyển that sautemp

3b) xóa temp

Sau đó, đơn giản

$(selectorA).swapWith(selectorB);

DEMO: http://codepen.io/anon/pen/akYajE

Bạn không cần hai bản sao, một sẽ làm. Lấy câu trả lời của Paolo Bergantino chúng ta có:

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

Nên nhanh hơn. Đi qua trong hai yếu tố nhỏ hơn cũng sẽ tăng tốc mọi thứ.

Tôi đã sử dụng một kỹ thuật như thế này trước đây. Tôi sử dụng nó cho danh sách kết nối trên 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');

Tôi đã tạo một chức năng cho phép bạn di chuyển nhiều tùy chọn đã chọn lên hoặc xuống

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

Phụ thuộc:

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

Đầu tiên, nó kiểm tra xem tùy chọn được chọn đầu tiên / cuối cùng có thể di chuyển lên / xuống hay không. Sau đó, nó lặp qua tất cả các yếu tố và các cuộc gọi

exchangeWith (Element.next () hoặc 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);
}

một cái khác mà không nhân bản:

Tôi có một yếu tố thực tế và danh nghĩa để trao đổi:

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

sau đó insert <div> beforevà removesau đó chỉ cần thiết, nếu bạn không thể đảm bảo, luôn có một yếu tố trước (trong trường hợp của tôi là vậy)

hãy xem plugin jQuery "Swapable"

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

nó được xây dựng trên "Sắp xếp" và trông giống như có thể sắp xếp (kéo thả, giữ chỗ, v.v.) nhưng chỉ trao đổi hai yếu tố: kéo và thả. Tất cả các yếu tố khác không bị ảnh hưởng và ở trên vị trí hiện tại của họ.

Đây là câu trả lời dựa trên @lotif logic câu trả lời của , nhưng khái quát hơn một chút

Nếu bạn chắp thêm / trả trước sau / trước khi các phần tử thực sự được di chuyển
=> không cần sao chép
=> các sự kiện được giữ

Có hai trường hợp có thể xảy ra

1. Một mục tiêu có cái gì đó " .prev()ious" => chúng ta có thể đặt mục tiêu khác .after()đó.
2. Một mục tiêu là con đầu tiên của nó .parent()=> chúng ta có thể .prepend()nhắm mục tiêu khác vào cha mẹ.

Mật mã

Mã này có thể được thực hiện thậm chí ngắn hơn, nhưng tôi giữ nó theo cách này để dễ đọc. Lưu ý rằng cha mẹ uy tín (nếu cần) và các yếu tố trước đó là bắt buộc.

$(function(){
  var $one = $("#one");
  var $two = $("#two");
  
  var $onePrev = $one.prev(); 
  if( $onePrev.length < 1 ) var $oneParent = $one.parent();

  var $twoPrev = $two.prev();
  if( $twoPrev.length < 1 ) var $twoParent = $two.parent();
  
  if( $onePrev.length > 0 ) $onePrev.after( $two );
    else $oneParent.prepend( $two );
    
  if( $twoPrev.length > 0 ) $twoPrev.after( $one );
    else $twoParent.prepend( $one );

});

... hãy thoải mái bọc mã bên trong trong một hàm :)

Ví dụ fiddle có thêm các sự kiện nhấp chuột kèm theo để thể hiện bảo toàn sự kiện ...
Ví dụ fiddle: https://jsfiddle.net/ewroodqa/

... sẽ hoạt động cho nhiều trường hợp khác nhau - thậm chí một trường hợp như:

<div>
  <div id="one">ONE</div>
</div>
<div>Something in the middle</div>
<div>
  <div></div>
  <div id="two">TWO</div>
</div>

Đây là giải pháp của tôi để di chuyển nhiều phần tử con lên xuống trong phần tử cha. Hoạt động tốt để di chuyển các tùy chọn đã chọn trong listbox ( <select multiple></select>)

Đi lên:

$(parent).find("childrenSelector").each((idx, child) => {
    $(child).insertBefore($(child).prev().not("childrenSelector"));
});

Đi xuống:

$($(parent).find("childrenSelector").get().reverse()).each((idx, child) => {
    $(opt).insertAfter($(child).next().not("childrenSelector"));
});

Nếu bạn muốn trao đổi hai mục được chọn trong đối tượng jQuery, bạn có thể sử dụng phương thức này

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

Tôi muốn một phù thủy giải pháp không sử dụng clone () vì nó có tác dụng phụ với các sự kiện đính kèm, đây là những gì tôi đã làm

jQuery.fn.swapWith = function(target) {
    if (target.prev().is(this)) {
        target.insertBefore(this);
        return;
    }
    if (target.next().is(this)) {
        target.insertAfter(this);
        return
    }

    var this_to, this_to_obj,
        target_to, target_to_obj;

    if (target.prev().length == 0) {
        this_to = 'before';
        this_to_obj = target.next();
    }
    else {
        this_to = 'after';
        this_to_obj = target.prev();
    }
    if (jQuery(this).prev().length == 0) {
        target_to = 'before';
        target_to_obj = jQuery(this).next();
    }
    else {
        target_to = 'after';
        target_to_obj = jQuery(this).prev();
    }

    if (target_to == 'after') {
        target.insertAfter(target_to_obj);
    }
    else {
        target.insertBefore(target_to_obj);
    }
    if (this_to == 'after') {
        jQuery(this).insertAfter(this_to_obj);
    }
    else {
        jQuery(this).insertBefore(this_to_obj);
    }

    return this;
};

không được sử dụng với các đối tượng jQuery chứa nhiều phần tử DOM

Nếu bạn có nhiều bản sao của mỗi yếu tố, bạn cần phải làm một cái gì đó trong một vòng lặp một cách tự nhiên. Tôi đã có tình huống này gần đây. Hai phần tử lặp lại mà tôi cần để chuyển đổi có các lớp và một div container như vậy:

<div class="container">
  <span class="item1">xxx</span>
  <span class="item2">yyy</span>
</div> 
and repeat...

Đoạn mã sau cho phép tôi lặp lại mọi thứ và đảo ngược ...

$( ".container " ).each(function() {
  $(this).children(".item2").after($(this).children(".item1"));
});

Tôi đã thực hiện nó với đoạn trích này

// 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();

Tôi đã làm một bảng để thay đổi thứ tự obj trong cơ sở dữ liệu được sử dụng .after () .b Before (), vì vậy đây là từ những gì tôi đã thử nghiệm.

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

Được chèn obj1 trước obj2 và

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

làm ngược lại.

Vì vậy, nếu obj1 là sau obj3 và obj2 sau obj4, và nếu bạn muốn thay đổi vị trí obj1 và obj2, bạn sẽ làm như thế

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

Điều này sẽ làm điều đó BTW, bạn có thể sử dụng .prev () và .next () để tìm obj3 và obj4 nếu bạn chưa có một loại chỉ mục nào cho nó.

nếu nodeA và nodeB là anh em ruột, thích hai <tr>cái giống nhau <tbody>, bạn chỉ cần sử dụng $(trA).insertAfter($(trB))hoặc $(trA).insertBefore($(trB))trao đổi chúng, nó hoạt động với tôi. và bạn không cần phải gọi $(trA).remove()trước, nếu không bạn cần phải liên kết lại một số sự kiện nhấp chuột trên$(trA)

$('.five').swap('.two');

Tạo một hàm jQuery như thế này

$.fn.swap = function (elem) 
{
    elem = elem.jquery ? elem : $(elem);
    return this.each(function () 
    {
        $('<span></span>').insertBefore(this).before(elem.before(this)).remove();
    });
};

Cảm ơn Yannick Guinness tại https://jsfiddle.net/ARTsinn/TVjnr/

Tùy chọn tốt nhất là sao chép chúng bằng phương thức clone ().

Tôi nghĩ bạn có thể làm điều đó rất đơn giản. Ví dụ: giả sử bạn có cấu trúc tiếp theo: ...

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

và kết quả phải là

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

jquery:

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

Tôi hy vọng nó sẽ giúp!