Tengo tres div y quiero que cada vez que haga clic en cualquier div, se intercambie con un segundo div que debe estar en el centro.
He probado así y no funciona:
function swapDiv(event, elem) { elem.parentNode.insertBefore(elem, elem.parentNode.secondChild); } <div class="all-div-container"> <div class="div1" onclick="swapDiv(event,this);"> 1 </div> <div class="div2" onclick="swapDiv(event,this);"> 2 </div> <div class="div3" onclick="swapDiv(event,this);"> 3 </div> </div>1 2 3 y cuando hago clic en 3 el resultado debe ser 1 3 2 de este resultado y hago clic en 1 debe ser 3 1 2
function swapDiv(event, elem) { // get all elements in .all-div-container const allElements = [...elem.parentElement.children]; // get index of target elem const targetIndex = allElements.indexOf(elem); // get center element const centerElem = allElements[1]; // exit from function if we clicked at center elem if (elem === centerElem) return; // move center element if (targetIndex === 0) { elem.parentElement.prepend(centerElem) } else { elem.parentElement.append(centerElem) } } <div class="all-div-container"> <div class="div1" onclick="swapDiv(event,this);"> 1 </div> <div class="div2" onclick="swapDiv(event,this);"> 2 </div> <div class="div3" onclick="swapDiv(event,this);"> 3 </div> </div>Considera lo siguiente.
$(function() { $(".all-div-container > div").click(function(event) { if ($(this).index() == 0) { return false; } var $prev = $(this).prev(); var $self = $(this).detach(); $prev.before($self); }); }); .all-div-container>div { height: 2em; width: 100%; border: 1px solid #ccc; border-radius: 3px; margin-bottom: 3px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="all-div-container"> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div> </div>No aclaró qué debería suceder si se hace clic en el primer elemento. Este código intercambiará el elemento en el que se hizo clic y el elemento anterior.