javascript - div - queryselector vs getelementbyid
Reordenamiento de Divs (6)
Como etiquetó jQuery, puede usar javascript para eliminar los elementos y luego volver a insertarlos, aunque puede que no sea demasiado flexible.
Tener un poco más de contexto generaría mejores respuestas, creo.
¿Cómo podría reorganizar los divs sin alterar el código fuente HTML?
Por ejemplo, quiero que los divs aparezcan en orden # div2, # div1, # div3, pero en el HTML son:
<div id="#div1"></div>
<div id="#div2"></div>
<div id="#div3"></div>
¡Gracias!
En jQuery, puedes hacer lo siguiente:
$("#div1").insertAfter("#div2");
Eso moverá el elemento con id ''div1'' al elemento after con id ''div2''. Esto supone que eliminas el ''#'' de tus atributos de id.
No hay forma de reordenar elementos con css.
Puede invertir su orden horizontal al colocarlos todos a la derecha. O puede colocarlos absolutamente en relación con el cuerpo o algún otro elemento que lo contenga, pero eso conlleva serias limitaciones con respecto al tamaño de los elementos y al posicionamiento relativo a otros elementos en la página.
Respuesta corta: solo puede lograr esto en un conjunto de circunstancias muy limitadas. La reordenación de los elementos se realiza mejor en el marcado.
Si no tienes control sobre el html, puedes usar javascript. Aquí usando jQuery:
$("#div2").insertAfter("#div3");
$("#div1").prependTo("#div2");
Ciertamente no lo recomiendo a menos que tus manos estén atadas. Será más difícil de mantener, y para los usuarios finales hará que su página "se mueva" mientras configura la página.
Podrías hacer, en Javascript:
function reOrder() {
divOne = document.getElementById(''#div1'');
divTwo = document.getElementById(''#div2'');
divThree = document.getElementById(''#div3'');
container = divOne.parentNode;
container.appendChild(divTwo);
container.appendChild(divOne);
container.appendChild(divThree);
}
Editar: corregido el error tipográfico en los ID.
Usaría Javascript para atravesar los nodos en consecuencia. Si desea utilizar una biblioteca como jQuery, puede usar las sugerencias anteriores. Si prefiere no tener la hinchazón, use la siguiente solución simple y minimalista ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function swapSibling(node1, node2) {
node1.parentNode.replaceChild(node1, node2);
node1.parentNode.insertBefore(node2, node1);
}
window.onload = function() {
swapSibling(document.getElementById(''div1''), document.getElementById(''div2''));
}
</script>
</head>
<body>
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
</body>
</html>
Atentamente...
EDITAR: Cambié el nombre de la función de swapNode a swapSibling, ya que estoy bastante seguro de que esto solo funcionará con nodos que tengan el mismo padre.
Dado que ahora Flexbox es ampliamente compatible, también puedes usarlo para reordenar divs usando css solamente:
<div id="container">
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
</div>
Y css:
#container{
display: flex;
flex-direction: column;
}
#div2{
order:2
}
#div3{
order:1
}
Mostraría:
1
3
2
Puedes probarlo en este violín .