que - Mueva un elemento un lugar hacia arriba o hacia abajo en el árbol de dom con javascript

replace html javascript

Question

Quiero una forma javascript para mover un elemento un lugar hacia arriba o hacia abajo en el árbol dom dentro de un padre conocido en particular usando javascript (o jquery está bien), pero quiero que la secuencia de comandos sepa cuándo un elemento es el primero o el último elemento dentro del Padre y no ser movido. por ejemplo, si tengo lo siguiente ...

<div id=''parent_div''>
<div id=''div_1''></div>
<div id=''div_2''></div>
<div id=''div_3''></div>
</div>

al hacer clic en un botón, quiero pasar una identificación conocida (digamos div_2 ) y moverla hasta la posición que se encuentra arriba, intercambiando su posición con el elemento que estaba antes (en este caso div_1 ). Los ID de los elementos no tienen que cambiar, y su nueva posición no necesita ser conocida, al menos no a menos que se muevan de nuevo.

Answer 1

Con jQuery:

var e = $("#div_2");
// move up:
e.prev().insertAfter(e);
// move down:
e.next().insertBefore(e);

Answer 2

Mueve el element "arriba":

if(element.previousElementSibling)
element.parentNode.insertBefore(element, element.previousElementSibling);

Mueve el element "abajo":

if(element.nextElementSibling)
element.parentNode.insertBefore(element.nextElementSibling, element);

function moveUp(element) {
if(element.previousElementSibling)
element.parentNode.insertBefore(element, element.previousElementSibling);
}
function moveDown(element) {
if(element.nextElementSibling)
element.parentNode.insertBefore(element.nextElementSibling, element);
}
document.querySelector(''ul'').addEventListener(''click'', function(e) {
if(e.target.className === ''down'') moveDown(e.target.parentNode);
else if(e.target.className === ''up'') moveUp(e.target.parentNode);
});

.up, .down { cursor: pointer; }
.up:after { content: ''△''; }
.up:hover:after { content: ''▲''; }
.down:after { content: ''▽''; }
.down:hover:after { content: ''▼''; }

<ul>
<li>1<span class="up"></span><span class="down"></span></li>
<li>2<span class="up"></span><span class="down"></span></li>
<li>3<span class="up"></span><span class="down"></span></li>
<li>4<span class="up"></span><span class="down"></span></li>
<li>5<span class="up"></span><span class="down"></span></li>
</ul>

Answer 3

Obtenga todos los divs secundarios con el ID de los padres (#parent_div) usando la función $ .each de jQuery. Supongamos que desea intercambiar div3 con div2, entonces el índice de div3 será 2. use $ (# div_3) .insBrente antes (# div_2)

Answer 4

Puede usar el método .index() incorporado de JQuery para obtener la ubicación de un elemento secundario y obtener el valor de .length un elemento principal para averiguar el número de elementos.

Si el index regresa a 0, es el primer elemento, si el index devuelve la longitud del elemento padre -1, entonces sabrá que es el último elemento.

Para mover los elementos por sí mismos, puede usar .insertBefore y .prev para mover un elemento hacia arriba.

 var elm = $("selector_for_the_element");
elm.insertBefore(elm.prev());

Para mover un elemento hacia abajo, puede usar insertAfter y .next

 var elm = $("selector_for_the_element");
elm.insertAfter(elm.next());