มีฟังก์ชัน jQuery ในการสลับองค์ประกอบหรือไม่

ฉันสามารถสลับสององค์ประกอบด้วย jQuery ได้อย่างง่ายดายหรือไม่?

ฉันกำลังมองหาที่จะทำกับหนึ่งบรรทัดถ้าเป็นไปได้

ฉันมีองค์ประกอบที่เลือกและฉันมีสองปุ่มเพื่อเลื่อนขึ้นหรือลงตัวเลือกและฉันมีตัวเลือกและตัวเลือกปลายทางอยู่แล้วฉันทำได้ด้วยถ้า แต่ฉันสงสัยว่ามีวิธีที่ง่ายกว่าหรือไม่

ฉันพบวิธีที่น่าสนใจในการแก้ปัญหานี้โดยใช้ jQuery เท่านั้น:

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

หรือ

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

:)

ถูกต้องของเปาโล แต่ฉันไม่แน่ใจว่าทำไมเขาโคลนองค์ประกอบที่เกี่ยวข้อง สิ่งนี้ไม่จำเป็นจริงๆและจะสูญเสียการอ้างอิงหรือผู้ฟังเหตุการณ์ที่เกี่ยวข้องกับองค์ประกอบและลูกหลานของพวกเขา

นี่คือรุ่นที่ไม่ลอกแบบโดยใช้วิธี 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);
}

ไม่ไม่มี แต่คุณสามารถชักหนึ่ง:

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 องค์ประกอบเท่านั้นมิฉะนั้นจะทำให้ได้ผลลัพธ์ที่แปลก

มีปัญหาจำนวนมากเกี่ยวกับปัญหานี้ซึ่งไม่ได้รับการจัดการโดยคำตอบที่ยอมรับหรือคำตอบของ bobince โซลูชันอื่น ๆ ที่เกี่ยวข้องกับการโคลนนั้นมาถูกทาง แต่การโคลนนั้นมีราคาแพงและไม่จำเป็น เราถูกล่อลวงให้โคลนเพราะปัญหาอายุของการแลกเปลี่ยนสองตัวแปรซึ่งหนึ่งในขั้นตอนคือการกำหนดหนึ่งในตัวแปรให้เป็นตัวแปรชั่วคราว การมอบหมาย (การโคลน) ในกรณีนี้ไม่จำเป็น นี่คือโซลูชันที่ใช้ jQuery:

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

คำตอบเหล่านี้จำนวนมากผิดปกติสำหรับกรณีทั่วไปคำตอบอื่น ๆ มีความซับซ้อนโดยไม่จำเป็นหากจริง ๆ แล้วพวกเขายังใช้งานได้ jQuery .beforeและ.afterเมธอดทำสิ่งที่คุณต้องการทำส่วนใหญ่ แต่คุณจำเป็นต้องมีองค์ประกอบที่ 3 ในการทำงานของอัลกอริทึมการแลกเปลี่ยนหลายอย่าง มันค่อนข้างง่าย - สร้างองค์ประกอบ DOM ชั่วคราวเป็นตัวยึดตำแหน่งขณะที่คุณย้ายสิ่งต่าง ๆ ไม่จำเป็นต้องดูพ่อแม่หรือพี่น้องและไม่จำเป็นต้องโคลน ...

$.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) วาง div ชั่วคราวไว้tempก่อนthis

2) ย้ายthisก่อนthat

3) ย้ายthatหลังจากtemp

3b) ลบ temp

จากนั้นก็ง่ายๆ

$(selectorA).swapWith(selectorB);

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

คุณไม่จำเป็นต้องมีสองโคลนหนึ่งจะทำ รับ Paolo Bergantino ตอบเรามี:

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

ควรจะเร็วกว่า การผ่านองค์ประกอบที่น้อยลงของทั้งสองควรทำให้สิ่งต่าง ๆ เร็วขึ้น

ฉันใช้เทคนิคแบบนี้มาก่อน ฉันใช้สำหรับรายการตัวเชื่อมต่อบน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');

ฉันได้ทำฟังก์ชั่นที่ให้คุณเลื่อนตัวเลือกที่เลือกไว้หลายตัวขึ้นหรือลง

$('#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);
}

อีกอันหนึ่งที่ไม่มีการโคลน:

ฉันมีองค์ประกอบจริงและมีการแลกเปลี่ยน:

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

แล้วก็ insert <div> beforeและremoveหลังจากนั้นมีความจำเป็นเท่านั้นถ้าคุณไม่สามารถตรวจสอบให้แน่ใจว่ามีอยู่เสมอเป็นองค์ประกอบ befor (ในกรณีของฉันมันเป็น)

ลองดูที่ jQuery plugin "สลับได้"

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

มันสร้างขึ้นบน "Sortable" และดูเหมือนว่าสามารถเรียงได้ (drag-n-drop, placeholder, ฯลฯ ) แต่เพียงสลับสององค์ประกอบ: ลากแล้วปล่อย องค์ประกอบอื่น ๆ ทั้งหมดจะไม่ได้รับผลกระทบและยังคงอยู่ในตำแหน่งปัจจุบัน

นี่คือคำตอบตาม@lotifตรรกะการตอบของแต่เป็นการวางนัยทั่วไปมากกว่า

หากคุณต่อท้าย / เสริมหลัง / ก่อนที่องค์ประกอบจะถูกย้าย จริง
=> ไม่จำเป็นต้องมีการโคลน
=> เหตุการณ์ที่เก็บไว้

มีสองกรณีที่สามารถเกิดขึ้นได้

1. เป้าหมายหนึ่งมีบางอย่าง " .prev()ious" => เราสามารถใส่เป้าหมายอื่น.after()ได้
2. เป้าหมายหนึ่งคือลูกคนแรกของมัน.parent()=> เราสามารถ.prepend()กำหนดเป้าหมายอื่นให้กับผู้ปกครองได้

รหัส

รหัสนี้สามารถทำได้สั้นกว่านี้ แต่ฉันเก็บไว้เพื่อความสะดวกในการอ่าน ทราบว่าผู้ปกครอง prestoring (ถ้าจำเป็น) และองค์ประกอบก่อนหน้านี้เป็นสิ่งจำเป็น

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

});

... รู้สึกอิสระในการห่อโค้ดด้านในฟังก์ชั่น :)

ตัวอย่างซอมีการคลิกเหตุการณ์พิเศษที่แนบมาเพื่อแสดงให้เห็นถึงการเก็บรักษาเหตุการณ์ ...
ตัวอย่างซอ: https://jsfiddle.net/ewroodqa/

... จะใช้งานได้ในหลายกรณี - แม้แต่กรณีเดียวเช่น:

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

นี่เป็นวิธีการแก้ปัญหาของฉันในการย้ายองค์ประกอบลูกหลายรายการขึ้นและลงภายในองค์ประกอบหลัก ทำงานได้ดีสำหรับการย้ายตัวเลือกที่เลือกใน listbox ( <select multiple></select>)

ขยับขึ้น:

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

ย้ายลง:

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

หากคุณต้องการสลับสองรายการที่เลือกในวัตถุ jQuery คุณสามารถใช้วิธีนี้

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

ฉันต้องการแม่มดแก้ปัญหาไม่ได้ใช้โคลน () เพราะมันมีผลข้างเคียงกับเหตุการณ์ที่แนบมานี่คือสิ่งที่ฉันทำ

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

ต้องไม่ใช้กับวัตถุ jQuery ที่มีองค์ประกอบ DOM มากกว่าหนึ่งรายการ

หากคุณมีหลายองค์ประกอบของแต่ละองค์ประกอบคุณต้องทำบางสิ่งบางอย่างในวงโดยธรรมชาติ ฉันมีสถานการณ์เช่นนี้เมื่อเร็ว ๆ นี้ องค์ประกอบการทำซ้ำสองที่ฉันต้องการสลับมีคลาสและ div คอนเทนเนอร์ดังนี้:

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

รหัสต่อไปนี้อนุญาตให้ฉันวนซ้ำทุกอย่างและย้อนกลับ ...

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

ฉันทำมันด้วยตัวอย่างนี้

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

ฉันทำตารางสำหรับเปลี่ยนลำดับของ obj ในฐานข้อมูลที่ใช้. after () .before () ดังนั้นนี่คือสิ่งที่ฉันได้ทำการทดลอง

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

คือการแทรก obj1 ก่อน obj2 และ

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

ทำในทางกลับกัน

ดังนั้นหาก obj1 อยู่หลัง obj3 และ obj2 หลังจาก obj4 และถ้าคุณต้องการเปลี่ยนสถานที่ obj1 และ obj2 คุณจะทำเช่นนั้น

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

สิ่งนี้ควรทำด้วย BTW คุณสามารถใช้. prev () และ. next () เพื่อค้นหา obj3 และ obj4 หากคุณไม่มีดัชนีสำหรับประเภทนี้อยู่แล้ว

ถ้า nodeA และ nodeB เป็นพี่น้องชอบสอง<tr>สิ่งเดียวกัน<tbody>คุณสามารถใช้$(trA).insertAfter($(trB))หรือ$(trA).insertBefore($(trB))สลับมันได้ผลสำหรับฉัน และคุณไม่จำเป็นต้องโทรหา$(trA).remove()ก่อนอื่นคุณต้องผูกกิจกรรมการคลิกบางส่วนอีกครั้ง$(trA)

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

สร้างฟังก์ชั่น jQuery เช่นนี้

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

ขอบคุณYannick Guinnessที่https://jsfiddle.net/ARTsinn/TVjnr/

ตัวเลือกที่ดีที่สุดคือการโคลนด้วยวิธี clone ()

ฉันคิดว่าคุณสามารถทำได้ง่ายมาก ตัวอย่างเช่นสมมติว่าคุณมีโครงสร้างถัดไป: ...

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

และผลลัพธ์ควรเป็น

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

jQuery:

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

ฉันหวังว่ามันจะช่วย!