Existe uma função jQuery nativa para alternar elementos?

Posso trocar facilmente dois elementos com o jQuery?

Eu estou olhando para fazer isso com uma linha, se possível.

Eu tenho um elemento de seleção e dois botões para mover para cima ou para baixo nas opções, e já tenho os seletores selecionados e de destino no lugar, faço-o com um if, mas queria saber se existe uma maneira mais fácil.

Eu encontrei uma maneira interessante de resolver isso usando apenas jQuery:

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

ou

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

:)

Paulo está certo, mas não sei por que ele está clonando os elementos em questão. Isso não é realmente necessário e perderá referências ou ouvintes de eventos associados aos elementos e seus descendentes.

Aqui está uma versão sem clonagem usando métodos DOM simples (já que o jQuery realmente não possui funções especiais para facilitar essa operação em 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);
}

Não, não há, mas você pode preparar um:

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

Observe que isso só funciona se os seletores corresponderem apenas a 1 elemento cada, caso contrário, poderá gerar resultados estranhos.

Existem muitos casos extremos para esse problema, que não são tratados pela resposta aceita ou pela resposta de bobince. Outras soluções que envolvem a clonagem estão no caminho certo, mas a clonagem é cara e desnecessária. Somos tentados a clonar, devido ao antigo problema de como trocar duas variáveis, em que uma das etapas é atribuir uma das variáveis ​​a uma variável temporária. A atribuição (clonagem), neste caso, não é necessária. Aqui está uma solução baseada em jQuery:

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

Muitas dessas respostas estão simplesmente erradas para o caso geral, outras são desnecessariamente complicadas se, de fato, funcionam. O jQuery .beforee os .aftermétodos fazem a maior parte do que você deseja fazer, mas você precisa de um terceiro elemento da maneira como muitos algoritmos de swap funcionam. É bem simples - crie um elemento DOM temporário como um espaço reservado enquanto você move as coisas. Não há necessidade de olhar para pais ou irmãos, e certamente não há necessidade 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) coloque a div temporária tempantesthis

2) mover thisantesthat

3) mover thatdepoistemp

3b) remover temp

Então simplesmente

$(selectorA).swapWith(selectorB);

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

Você não deve precisar de dois clones, um servirá. Tomando Paolo Bergantino resposta, temos:

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

Deve ser mais rápido. Passar no menor dos dois elementos também deve acelerar as coisas.

Eu usei uma técnica como essa antes. Eu o uso para a lista de conectores em 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');

Eu criei uma função que permite mover várias opções selecionadas para cima ou para baixo

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

Dependências:

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

Primeiro, ele verifica se a primeira / última opção selecionada é capaz de mover para cima / para baixo. Em seguida, percorre todos os elementos e chama

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

outro sem clonagem:

Eu tenho um elemento real e um nominal para trocar:

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

então insert <div> beforee removedepois só são necessários, se você não puder garantir, que sempre exista um elemento antes (no meu caso, é)

dê uma olhada no plugin jQuery "Swapable"

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

é baseado em "Classificável" e parece classificável (arrastar e soltar, espaço reservado etc.), mas apenas trocar dois elementos: arrastado e solto. Todos os outros elementos não são afetados e permanecem na posição atual.

Esta é uma resposta baseada em @lotif lógica de resposta do , mas um pouco mais generalizada

Se você acrescentar / acrescentar antes / antes dos elementos serem realmente movidos
=> não é necessário clonar
=> eventos mantidos

Existem dois casos que podem acontecer

1. Um alvo tem algo " .prev()ious" => podemos colocar o outro alvo .after()nisso.
2. Um alvo é o primeiro filho dele .parent()=> podemos .prepend()o outro alvo para os pais.

O código

Esse código pode ser feito ainda mais curto, mas eu o mantive assim para facilitar a leitura. Observe que o pré-armazenamento dos pais (se necessário) e dos elementos anteriores é obrigatório.

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

});

... sinta-se à vontade para agrupar o código interno em uma função :)

O violino de exemplo possui eventos de clique extras anexados para demonstrar a preservação do evento ...
Violino de exemplo: https://jsfiddle.net/ewroodqa/

... funcionará em vários casos - até um como:

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

Esta é minha solução para mover vários elementos filhos para cima e para baixo dentro do elemento pai. Funciona bem para mover as opções selecionadas na caixa de listagem ( <select multiple></select>)

Subir:

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

Mover para baixo:

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

Se você deseja trocar dois itens selecionados no objeto jQuery, pode usar este método

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

Eu queria uma solução que não use clone (), pois tem efeito colateral com eventos anexados, eis o que acabei fazendo

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

ele não deve ser usado com objetos jQuery que contêm mais de um elemento DOM

Se você tiver várias cópias de cada elemento, precisará fazer algo em loop naturalmente. Eu tive essa situação recentemente. Os dois elementos repetidos que eu precisava alternar tinham classes e uma div de contêiner da seguinte maneira:

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

O código a seguir me permitiu percorrer tudo e reverter ...

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

Eu fiz isso com este trecho

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

Eu fiz uma tabela para alterar a ordem de obj no banco de dados usado .after () .before (), então isso é do que eu experimento.

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

É inserir obj1 antes de obj2 e

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

faça o vice-versa.

Portanto, se obj1 for após obj3 e obj2 após obj4, e se você quiser mudar de lugar obj1 e obj2, você fará isso como

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

Isso deve ser feito: BTW, você pode usar .prev () e .next () para encontrar obj3 e obj4 se você ainda não possui algum tipo de índice.

se nodeA e nodeB são irmãos, gostam de dois <tr>no mesmo <tbody>, você pode simplesmente usar $(trA).insertAfter($(trB))ou $(trA).insertBefore($(trB))trocá-los, funciona para mim. e você não precisa ligar $(trA).remove()antes, caso contrário, é necessário vincular novamente alguns eventos de clique em$(trA)

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

Crie uma função 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();
    });
};

Agradecimentos a Yannick Guinness em https://jsfiddle.net/ARTsinn/TVjnr/

A melhor opção é cloná-los com o método clone ().

Eu acho que você pode fazer isso de maneira muito simples. Por exemplo, digamos que você tenha a próxima estrutura: ...

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

e o resultado deve ser

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

jquery:

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

Espero que ajude!