6

Desejo fazer isso com jQuery, qual a forma mais elegante de se fazer isso?

Supondo o cenário a seguir, como ficaria se eu quisesse trocar de posição a div2 com a div3? (não postarei o meu código real que é muito grande)

<body>
    <div id="div1" class="parte1" style="color:black">
        <p> Conteúdo da Div </p>
    </div>
    <div id="div2" class="parte2" style="color:blue">
        <p> Conteúdo da Div </p>
    </div>
    <div id="div3" class="parte3" style="color:red">
        <p> Conteúdo da Div </p>
    </div>
    <div id="div4" class="parte4" style="color:green">
        <p> Conteúdo da Div </p>
    </div>
 </body>
2
  • Quem chegou agora, ignore os downvotes e dê uma olhada na minha resposta para ver um método que troca elementos independentemente da estrutura.
    – utluiz
    Commented 19/12/2013 às 20:30
  • Não acredito que ninguém ainda sugeriu a solução clássica...
    – mgibsonbr
    Commented 20/12/2013 às 1:54

6 Respostas 6

8

Método simplificado:

Uma forma de relizar a operação pretendida, com pouco código mas limitado a elementos que se encontram um ao lado do outro, é fazer uso do método de jQuery .before(), onde o que é feito é pegar no $ele2 e passar o mesmo para antes do $ele1:

function switchElements($ele1, $ele2) {
    $ele1.before($ele2);
}

switchElements($('#div2'), $('#div3'));

Ver exemplo no JSFiddle.

Também podemos utilizar o método de jQuery .after() que fará o inverso:

function switchElements($ele1, $ele2) {
    $ele2.after($ele1);
}

switchElements($('#div2'), $('#div3'));

Ver exemplo no JSFiddle.

Nota:
Isto são tudo métodos de jQuery muito semelhantes aos já sugeridos em outras respostas.
Por outro lado é limitado pelo facto de que a sensação de "trocar de posição" só é tida se os elementos estiverem lado a lado.


Método genérico:

Uma maneira para realizar o pretendido pode ser atingida fazendo uso do método de jQuery .clone() e do método .replaceWith():

// cache elements
var $div1 = $('#div1'),
    $div2 = $('#div2');

// clone elements and their contents
var $div1Clone = $div1.clone(),
    $div2Clone = $div2.clone();

// switch places
$div1.replaceWith($div2Clone);
$div2.replaceWith($div1Clone);

Ver exemplo no JSFiddle.


Passando este exemplo para uma função:

function switchElements($ele1, $ele2) {

    // clone elements and their contents
    var $ele1Clone = $ele1.clone(),
        $ele2Clone = $ele2.clone();

    // switch places
    $ele1.replaceWith($ele2Clone);
    $ele2.replaceWith($ele1Clone);
}

Utilização:

// cache elements
var $ele1 = $('#div2'),
    $ele2 = $('#div3');

switchElements($ele1, $ele2);

Ver exemplo no JSFiddle.

2
  • O "simplificado" não funciona. Experimente inverter a #div2 com a #div4. Commented 19/12/2013 às 18:26
  • 1
    @GuilhermeBernal Não, não funciona dessa forma, por isso tive o cuidado de deixar a nota que esse método só faz "troca" quando os elementos estão lado a lado. Por isso é que não sugeri em primeiro lugar. Para trocar elementos "longe" uns dos outros, é preciso utilizar o "método genérico". :) ver JSFiddle.
    – Zuul
    Commented 19/12/2013 às 18:35
4

Vejo muitas abordagens diferentes, mas nenhuma usando o clássico algoritmo de se trocar duas variáveis de valor:

swap = a
a = b
b = swap

No caso de jQuery ficaria assim:

function trocar(a, b) {
    var swap = $("<span/>");
    a.after(swap).detach();
    b.after(a).detach();
    swap.after(b).detach();
}

Esclarecendo:

  1. a.after(swap) coloca swap logo após a, retornando a si mesma;

  2. a.detach() remove a si mesma do DOM - mas mantendo dados e ouvintes:

    O método .detach() é o mesmo que .remove(), exceto que .detach() mantém todos os dados jQuery associados com os elementos removidos. Esse método é útil quando os elementos removidos serão reinseridos no DOM em um momento posterior.

Exemplo completo no jsFiddle.

3

Eis uma função que dá conta de inverter quaisquer elementos que sejam irmãos no DOM, sem utilizar clonagem:

function inverterPosicoes(el1, el2) {
    el1 = $(el1);
    el2 = $(el2);
    var prev = el1.prev();
    var parent = el1.parent();

    // Move o primeiro elemento para a posição do segundo
    el2.after(el1);

    // Move o segundo elemento para onde o primeiro estava
    if (prev.length) {
        // Se o primeiro elemento não era o primeiro filho
        prev.after(el2);
    } else {
        // Se o primeiro elemento era o primeiro filho
        parent.prepend(el2);
    }
}

http://jsfiddle.net/342LP/

1
3

Nota

Minha resposta inicial era simplista e não funcionava em 100% dos casos. Fiz então uma implementação um tanto complexa, mas ainda não fiquei satisfeito, assim como com as outras respostas.

Estou considerando apenas as soluções gerais, isto é, que se aplicam a troca de quaisquer elementos em níveis e posições diferentes.

Análise das soluções propostas

A mais simples e direta é a do @mbigsonbr, mas fiquei com um pé atrás por causa da criação e inserção de um elemento desnecessariamente.

A resposta do @Zuul de clonagem também é simples e interessante, mas também parece ainda mais pesada.

A minha resposta parece muito complexa. Será que é necessário tudo aquilo?

O teste de desempenho

Decidi então aplicar as diferentes técnicas e fazer um teste de desempenho. Os resultados confirmaram minhas suspeitas:

  • A clonagem é muito lenta
  • Minha solução foi discretamente mais rápida que as demais quando os elementos estão no mesmo nível, mas devido à complexidade e ao uso excessiva da API do jQuery, quando os estão em níveis diferentes do DOM, o desempenho foi equivalente.

Ainda não satisfeito, cheguei à conclusão de que a solução do @mgibsonbr poderia ser facilmente convertida para Javascript puro. Fiz novamente o teste e parece que finalmente achei algo interessante.

Vejamos o resultado no gráfico abaixo:

Desempenho de algoritmos de swap

A legenda é a seguinte:

  • Azul escuro: o meu algoritmo com nós do mesmo nível
  • Vermelho: o meu algoritmo com nós de níveis diferentes
  • Amarelo: o algoritmo original do @mgibsonbr com nós do mesmo nível
  • Verde escuro: o algoritmo original do @mgibsonbr com nós de níveis diferentes
  • Roxo: o algoritmo modificado do @mgibsonbr com nós do mesmo nível
  • Azul claro: o algoritmo modificado do @mgibsonbr com nós de níveis diferentes
  • Pink: o algoritmo do @Zuul com nós do mesmo nível
  • Verde claro: o algoritmo do @Zuul com nós de níveis diferentes

Teste no jsperf

O meu algoritmo

(function ($) {

    $.fn.swap = function(anotherElement) {

        var sameParentStrategy = function(one, another) {
            var oneIndex = one.index();
            var anotherIndex = another.index();
            var swapFunction = function(first, second, firstIndex, secondIndex) {
                if (firstIndex == secondIndex - 1) {
                    first.insertAfter(second);
                } else {
                    var secondPrevious = second.prev();
                    second.insertAfter(first);
                    first.insertAfter(secondPrevious);
                }
            }
            if (oneIndex < anotherIndex) {
                swapFunction(one, another, oneIndex, anotherIndex);
            } else {
                swapFunction(another, one, anotherIndex, oneIndex);
            }
        };

        var differentParentsStrategy = function(one, another) {
            var positionStrategy = function(e) {
                var previous = e.prev();
                var next = e.next();
                var parent = e.parent();
                if (previous.length > 0) {
                    return function(e) {
                        e.insertAfter(previous);
                    };
                } else if (next.length > 0) {
                    return function(e) {
                        e.insertBefore(next);
                    };
                } else {
                    return function(e) {
                        parent.append(e);
                    };
                }
            }
            var oneStrategy = positionStrategy(one);
            var anotherStrategy = positionStrategy(another);
            oneStrategy(another);
            anotherStrategy(one);
            return this;
        };

        //check better strategy
        var one = $(this);
        var another = $(anotherElement);
        if (one.parent().get(0) == another.parent().get(0)) {
            console.log('sameParentStrategy');
            sameParentStrategy(one, another);
        } else {
            console.log('differentParentsStrategy');
            differentParentsStrategy(one, another);
        }

    };

}(jQuery));

Demo no jsfiddle.

O algoritmo modificado do @mgibsonbr

(function ($) {
    $.fn.swap = function(anotherElement) {
        var a = $(this).get(0);
        var b = $(anotherElement).get(0);
        var swap = document.createElement('span');
        a.parentNode.insertBefore(swap, a);
        b.parentNode.insertBefore(a, b);
        swap.parentNode.insertBefore(b, swap);
        swap.remove();
    }
}(jQuery));

Modo de Usar

$(elementSelector).swap(anotherElementSelector);
1
  • Bem, criei essa função de propósito geral que se acopla ao jQuery e troca dois elementos em qualquer tipo de estrutura. Por favor, avaliem e critiquem.
    – utluiz
    Commented 19/12/2013 às 20:10
2

Se os elementos forem vizinhos, use insertBefore:

$('#div3').insertBefore($('#div2'));

Exemplo

Exemplo executável: http://jsfiddle.net/rodrigorgs/uya47/

Explicação

A documentação do jQuery esclarece:

Pode-se selecionar um elemento da página e inseri-lo antes de outro:

$( "h2" ).insertBefore( $( ".container" ) );

Se um elemento selecionado dessa forma for inserido em um único local no DOM, ele será movido para o alvo (e não clonado).

Se houver mais de um elemento alvo, no entanto, serão inseridas cópias do elemento para cada alvo após o primeiro.

(tradução livre)

Conforme escreveu @utluiz, pode-se também usar o insertAfter; neste caso, inverte-se a ordem dos elementos.

2
  • Não funcionou. Experimente inverter a #div1 com a #div4. Commented 19/12/2013 às 18:29
  • Você está certo, eu não tinha pensado no caso geral =/
    – rodrigorgs
    Commented 19/12/2013 às 18:31
1

Tente isto:

function alterPosition(idElement1, idElement2){
    var div = $(idElement1).clone();
    $(idElement1).remove();
    $(idElement2).before(div);
}
13
  • Preppend não insere antes do elemento? Commented 19/12/2013 às 17:49
  • O correto é o .before(), .prepend() adiciona antes de todo o conteudo da tag selecionada...obrigado pela observação... Commented 19/12/2013 às 17:56
  • 2
    Eu posso estar a ler mal a tua função, mas parece-me que estás a remover o primeiro elemento, e depois vais ao segundo elemento e inseres antes dele o primeiro elemento... ou seja, fica tudo igual, não ocorreu troca de posições! :( (JSFiddle)
    – Zuul
    Commented 19/12/2013 às 18:00
  • Acho que realmente você entendeu errado, eu excluo o atual, e insiro ele antes do elemento desejado, de acordo com o parametro.... Commented 19/12/2013 às 18:20
  • @KennyRafael Sim, mas no Fiddle com o teu código, as div não trocam de posição, ve o link que deixei no comentário. (posso ter algo errado no Fiddle, se assim for, diz!)
    – Zuul
    Commented 19/12/2013 às 18:24

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .