1

Quero fazer a seguinte troca de posição, tenho uma div e dentro dela outras div's por exemplo:

<div class="div-principal">
    <div class="div-1"></div>
    <div class="div-2"></div>
    <div class="div-3"></div>
</div>

Pretendo selecionar a ultima div [div-3] e mover para antes da primeira div [div-1], e em outro contexto fazer o movimento contrario, mover a primeira para depois da ultima.

3
  • Você quer especificamente com JavaScript ou pode ser com jQuery? 31/08/2016 às 21:22
  • JavaScript apenas. 31/08/2016 às 21:33
  • Respondido, execute os códigos e veja em funcionamento. 31/08/2016 às 22:11

1 Resposta 1

3

Pode fazer utilizando o método insertBefore para mover para o início.

Já para mover para o final utilizei a função insertAfter da excelente resposta de karim79

Mantive a sua marcação HTML original, apenas incluí um texto para a visualização do exemplo funcionando.

Veja exemplo utilizando JavaScript puro (sem jQuery):

var principal = document.getElementsByClassName("div-principal")[0]; // div principal
var lista = principal.getElementsByTagName("div"); // pega os itens da lista
    

document.getElementById('btn1').addEventListener('click', function() {
    principal.insertBefore( lista[(lista.length - 1)],lista[0] ); // move a última para antes da primeira 
});


document.getElementById('btn2').addEventListener('click', function() {
       
    insertAfter( lista[0],lista[(lista.length - 1)] ); // move a primeira para depois da última
});


// função extraída de: https://stackoverflow.com/a/4793630/4921014
function insertAfter(newNode, referenceNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
.div-principal div{
      border:1px solid red;
      padding:5px;
      margin:5px;
 }
 <div class="div-principal">
        <div class="div-1">div1</div>
        <div class="div-2">div2</div>
        <div class="div-3">div3</div>
</div>

<br/>

<input type="button" value="Contexto 1: A última vai para o primeiro lugar" id="btn1">

<br/><br/>

<input type="button" value="Contexto 2: A primeira vai para o último lugar" id="btn2">

Bônus: Veja exemplo utilizando jQuery:

$('#btn1').click(function(){
    var conteudo_mover = $('.div-principal div:last-of-type'); // copia o conteudo da última
    $('.div-principal div:last-of-type').remove(); // remove a última
    $(conteudo_mover).insertBefore('.div-principal div:first-of-type'); // insere antes da primeira
});



$('#btn2').click(function(){
    var conteudo_mover = $('.div-principal div:first-of-type'); // copia o conteudo da primeira
    $('.div-principal div:first-of-type').remove(); // remove a primeira
    $(conteudo_mover).insertAfter('.div-principal div:last-of-type'); // insere depois da última
});
.div-principal div{
      border:1px solid red;
      padding:5px;
      margin:5px;
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="div-principal">
    <div class="div-1">div1</div>
    <div class="div-2">div2</div>
    <div class="div-3">div3</div>
</div>

<br/>
<input type="button" value="Contexto 1: A última vai para o primeiro lugar" id="btn1">
<br/>
<input type="button" value="Contexto 2: A primeira vai para o último lugar" id="btn2">

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 .