¿Existe una función nativa de jQuery para cambiar elementos?

¿Puedo intercambiar fácilmente dos elementos con jQuery?

Estoy buscando hacer esto con una línea si es posible.

Tengo un elemento de selección y tengo dos botones para mover hacia arriba o hacia abajo las opciones, y ya tengo el seleccionado y los selectores de destino en su lugar, lo hago con un if, pero me preguntaba si hay una manera más fácil.

He encontrado una forma interesante de resolver esto usando solo jQuery:

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

o

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

:)

Paulo tiene razón, pero no estoy seguro de por qué está clonando los elementos en cuestión. Esto no es realmente necesario y perderá cualquier referencia u oyentes de eventos asociados con los elementos y sus descendientes.

Aquí hay una versión sin clonación que usa métodos DOM simples (ya que jQuery realmente no tiene ninguna función especial para facilitar esta operación en particular):

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

No, no lo hay, pero podrías preparar uno:

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

Uso:

$(selector1).swapWith(selector2);

Tenga en cuenta que esto solo funciona si los selectores solo coinciden con 1 elemento cada uno, de lo contrario podría dar resultados extraños.

Hay muchos casos extremos para este problema, que no se manejan con la respuesta aceptada o la respuesta de bobince. Otras soluciones que implican la clonación están en el camino correcto, pero la clonación es costosa e innecesaria. Estamos tentados a clonar, debido al antiguo problema de cómo intercambiar dos variables, en el que uno de los pasos es asignar una de las variables a una variable temporal. La asignación, (clonación), en este caso no es necesaria. Aquí hay una solución basada en jQuery:

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

Muchas de estas respuestas son simplemente incorrectas para el caso general, otras son innecesariamente complicadas si de hecho incluso funcionan. JQuery .beforey los .aftermétodos hacen la mayor parte de lo que desea hacer, pero necesita un tercer elemento de la forma en que funcionan muchos algoritmos de intercambio. Es bastante simple: crea un elemento DOM temporal como marcador de posición mientras mueves las cosas. No hay necesidad de mirar a los padres o hermanos, y ciertamente no hay necesidad de clonar ...

$.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) poner el div temporal tempantesthis

2) muévete thisantesthat

3) moverse thatdespuéstemp

3b) eliminar temp

Entonces simplemente

$(selectorA).swapWith(selectorB);

MANIFESTACIÓN: http://codepen.io/anon/pen/akYajE

No debería necesitar dos clones, uno lo hará. Tomando la respuesta de Paolo Bergantino tenemos:

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

Debería ser más rápido. Pasar el más pequeño de los dos elementos también debería acelerar las cosas.

Usé una técnica como esta antes. Lo uso para la lista de conectores en 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');

He creado una función que le permite mover múltiples opciones seleccionadas hacia arriba o hacia abajo

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

Dependencias:

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

Primero verifica si la primera / última opción seleccionada puede moverse hacia arriba / abajo. Luego recorre todos los elementos y llama

swapWith (element.next () o 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);
}

otro sin clonar:

Tengo un elemento real y un elemento nominal para intercambiar:

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

entonces insert <div> beforey removedespués solo son necesarios, si no puede asegurarse, que siempre hay un elemento antes (en mi caso, es)

eche un vistazo al complemento jQuery "Swapable"

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

está construido en "Sortable" y parece ordenable (arrastrar y soltar, marcador de posición, etc.) pero solo intercambia dos elementos: arrastrado y soltado. Todos los demás elementos no se ven afectados y permanecen en su posición actual.

Esta es una respuesta basada en la lógica de respuesta de @lotif , pero un poco más generalizada

Si agrega / antepone después / antes de que los elementos se muevan realmente
=> no se necesita clonación
=> eventos guardados

Hay dos casos que pueden suceder.

1. Un objetivo tiene algo " .prev()ious" => podemos poner al otro objetivo .after()que.
2. Un objetivo es el primer hijo de its .parent()=> podemos .prepend()el otro objetivo a padre.

El código

Este código podría hacerse aún más corto, pero lo mantuve así para facilitar la lectura. Tenga en cuenta que la prescripción de los padres (si es necesario) y elementos anteriores es obligatoria.

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

});

... no dude en envolver el código interno en una función :)

El violín de ejemplo tiene eventos de clic adicionales adjuntos para demostrar la preservación de eventos ...
Violín de ejemplo: https://jsfiddle.net/ewroodqa/

... funcionará para varios casos, incluso uno como:

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

Esta es mi solución para mover varios elementos secundarios hacia arriba y hacia abajo dentro del elemento primario. Funciona bien para mover las opciones seleccionadas en el cuadro de lista (<select multiple></select> )

Ascender:

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

Mover hacia abajo:

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

Si desea intercambiar dos elementos seleccionados en el objeto jQuery, puede usar este método

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

Quería una solución que no use clone () ya que tiene efectos secundarios con eventos adjuntos, esto es lo que terminé haciendo

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

no debe usarse con objetos jQuery que contengan más de un elemento DOM

Si tiene varias copias de cada elemento, debe hacer algo en un bucle de forma natural. Tuve esta situación recientemente. Los dos elementos repetidos que necesitaba cambiar tenían clases y un contenedor div así:

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

El siguiente código me permitió recorrer todo e invertir ...

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

Lo he hecho con este fragmento.

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

Hice una tabla para cambiar el orden de obj en la base de datos utilizada .after () .before (), así que esto es de lo que tengo experimento.

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

Es insertar obj1 antes de obj2 y

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

hacer lo contrario

Entonces, si obj1 es después de obj3 y obj2 después de obj4, y si desea cambiar de lugar obj1 y obj2, lo hará como

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

Esto debería hacerlo, por cierto, puede usar .prev () y .next () para encontrar obj3 y obj4 si aún no tiene algún tipo de índice para él.

si nodeA y nodeB son hermanos, le gustan dos <tr>en el mismo <tbody>, solo puede usarlos $(trA).insertAfter($(trB))o $(trA).insertBefore($(trB))intercambiarlos, funciona para mí. y no necesita llamar $(trA).remove()antes, de lo contrario debe volver a vincular algunos eventos de clic en$(trA)

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

Cree una función jQuery como esta

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

Gracias a Yannick Guinness en https://jsfiddle.net/ARTsinn/TVjnr/

La mejor opción es clonarlos con el método clone ().

Creo que puedes hacerlo muy simple. Por ejemplo, supongamos que tiene la siguiente estructura: ...

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

y el resultado debería ser

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

jquery:

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

¡Espero que ayude!