Réorganisation des divisions

Comment devrais-je réorganiser les divs sans modifier le code source HTML?

Par exemple, je veux que les divs apparaissent dans l'ordre # div2, # div1, # div3, mais dans le HTML, ils sont:

<div id="#div1"></div> <div id="#div2"></div> <div id="#div3"></div>

Merci!

Il n'y a aucun moyen de réorganiser les éléments avec css.

Vous pouvez inverser leur ordre horizontalement en les flottant tout droit vers la droite. Ou vous pouvez les positionner absolument par rapport au corps ou à un autre élément contenant – mais cela comporte des limitations importantes concernant la taille des éléments et le positionnement par rapport à d'autres éléments sur la page.

Réponse courte: vous ne pouvez l'atteindre que dans des circonstances très limitées. Les éléments de réorganisation sont les meilleurs dans le balisage.

Si vous n'avez aucun contrôle sur le html, vous pouvez utiliser javascript. Ici en utilisant jQuery:

 $("#div2").insertAfter("#div3"); $("#div1").prependTo("#div2");

Je ne le recommande pas à moins que vos mains ne soient liées. Il sera plus difficile à entretenir, et pour vos utilisateurs finaux, cela rendra votre page "en mouvement" tout en configurant la page.

J'utiliserais Javascript pour traverser les nœuds en conséquence. Si vous souhaitez utiliser une bibliothèque comme jQuery, vous pouvez utiliser les suggestions ci-dessus. Si vous préférez ne pas avoir le gonflement, utilisez la solution simple et minimaliste suivante …

 <!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>

Meilleures salutations…

EDIT: Nom de la fonction modifiée de swapNode à swapSibling, car je suis assez certain que cela ne fonctionnera qu'avec les noeuds ayant le même parent.

Dans jQuery, vous pouvez effectuer les opérations suivantes:

 $("#div1").insertAfter("#div2");

Cela déplacera l'élément avec id 'div1' vers l'élément après avec id 'div2'. Cela suppose que vous éliminiez le '#' de vos attributs d'identification.

Depuis maintenant, Flexbox est largement pris en charge, vous pouvez également l'utiliser pour réorganiser les divs en utilisant uniquement CSS:

 <div id="container"> <div id="div1">1</div> <div id="div2">2</div> <div id="div3">3</div> </div>

Et css:

 #container{ display: flex; flex-direction: column; } #div2{ order:2 } #div3{ order:1 }

Il afficherait:

 1 3 2

Vous pouvez l'essayer sur cette violon .

Vous pourriez le faire, 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); }

Modifier: Fixe la faute des ID.

Puisque vous avez marqué jQuery, vous pouvez utiliser javascript pour supprimer les éléments, puis les réinsérer, même si cela peut ne pas être trop flexible.

Un peu plus de contexte vous permettrait de mieux répondre aux réponses.