Wie kann ich Elemente mit JavaScript neu anordnen?

Lesezeit: 4 Minuten

Benutzeravatar von Alexandre
Alexandre

Wie würde ich vorgehen, um Divs neu zu ordnen, ohne den HTML-Quellcode zu ändern?

Beispiel, ich möchte, dass divs in der Reihenfolge #div2, #div1, #div3 erscheinen, aber im HTML sind sie:

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

Vielen Dank!

  • Danke für deine Antworten. Meine aktuelle Lösung tut, was viele von Ihnen empfohlen haben, sie spielt mit dem HTML herum. Ich habe mich gefragt, ob es einen zuverlässigen Weg gibt, das Sortieren durchzuführen, ohne den HTML-Code zu berühren, und ich denke, Sie haben geantwortet: Nein. Ich schätze Ihre Hilfe!

    – Alexandre

    17. Februar 2009 um 22:00 Uhr

Magnars Benutzeravatar
Magnar

Es gibt keine allgemeine Möglichkeit, Elemente mit CSS neu anzuordnen.

Sie können ihre Reihenfolge horizontal umkehren, indem Sie sie alle nach rechts verschieben. Oder Sie können sie absolut relativ zum Hauptteil oder einem anderen umgebenden Element positionieren – aber das bringt strenge Einschränkungen hinsichtlich der Größe der Elemente und der Positionierung relativ zu anderen Elementen auf der Seite mit sich.

Kurze Antwort: Sie können dies nur unter sehr begrenzten Umständen erreichen. Das Neuordnen von Elementen erfolgt am besten im Markup.

Wenn Sie keine Kontrolle über den HTML-Code haben, können Sie Javascript verwenden. Hier mit jQuery:

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

Ich empfehle das sicherlich nicht, es sei denn, Ihnen sind die Hände gebunden. Es wird schwieriger zu warten sein, und für Ihre Endbenutzer wird Ihre Seite beim Einrichten der Seite “hin und her ruckeln”.

  • Ihre Formulierung ist unglücklich, weil Sie mit einer falschen Aussage beginnen. Es gibt eine allumfassende Möglichkeit, Elemente mit CSS neu anzuordnen: bestellen. Es spielt grundsätzlich keine Rolle, in welcher Reihenfolge sie sich im DOM befinden, sie werden in der Reihenfolge angezeigt, die durch die Elemente angegeben ist order CSS-Prop, wenn dieses Prop angegeben (und gültig) ist.

    – tao

    13. Dezember 2021 um 21:18 Uhr


  • Notiz: order funktioniert nur innerhalb von Elementen mit a display Wert von flex oder grid (oder ihre inline-* Varianten).

    – tao

    13. Dezember 2021 um 21:28 Uhr


Benutzeravatar von Krzysztof Atłasik
Krzysztof Atlasik

Seit jetzt Flexbox weithin unterstützt wird, können Sie es auch verwenden, um Divs nur mit CSS neu anzuordnen:

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

Und CSS:

#container{
  display: flex;
  flex-direction: column;
}

#div2{
  order:2
}

#div3{
  order:1
}

Es würde Folgendes anzeigen:

1
3
2

Du kannst es damit versuchen Geige.

  • Interessant! Durch die Verwendung von Javascript zum Ändern des CSS-Order-Attributs werden die Elemente nicht neu gezeichnet (z. B. element.style.order = 20;). Groß. So ist es möglich, Elemente ohne Neuzeichnen neu anzuordnen!

    – Dort

    19. März 2020 um 16:53 Uhr

  • Leider sagt MDN, dass Sie dies nicht tun sollten, wenn das Ändern der Reihenfolge mehr als nur eine visuelle Ablenkung ist, dh. es hat tatsächlich eine gewisse Bedeutung wie zum Beispiel in Suchergebnissen, weil es von Screenreadern nicht aufgegriffen wird: Da die Reihenfolge nur die visuelle Reihenfolge der Elemente beeinflussen soll und nicht ihre logische oder Tab-Reihenfolge. order darf nicht auf nicht-visuellen Medien wie Sprache verwendet werden. developer.mozilla.org/en-US/docs/Web/CSS/order

    – math2001

    14. März 2021 um 22:50 Uhr


Benutzeravatar von Josh Stodola
Josh Stodola

Ich würde Javascript verwenden, um die Knoten entsprechend zu durchlaufen. Wenn Sie eine Bibliothek wie jQuery verwenden möchten, können Sie die obigen Vorschläge verwenden. Wenn Sie das Aufblähen lieber vermeiden möchten, verwenden Sie die folgende einfache und minimalistische Lösung …

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

Mit freundlichen Grüßen…

BEARBEITEN: Der Funktionsname wurde von swapNode in swapSibling geändert, da ich mir ziemlich sicher bin, dass dies nur mit Knoten funktioniert, die denselben übergeordneten Knoten haben.

  • @ node1.parentNode.insertBefore (Knoten2, Knoten1); > wird node1.parentNode weiterhin referenziert, da node1 durch node2 ersetzt wird?

    – Josef Merdrignac

    9. September 2016 um 10:46 Uhr


In jQuery können Sie Folgendes tun:

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

Dadurch wird das Element mit der ID „div1“ nach dem Element mit der ID „div2“ verschoben. Dies setzt voraus, dass Sie das ‘#’ aus Ihren ID-Attributen entfernen.

Sie könnten in Javascript Folgendes tun:

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);
}

Bearbeiten: Tippfehler in IDs behoben.

Benutzeravatar von Tom Ritter
Thomas Ritter

Da Sie jQuery getaggt haben, könnten Sie Javascript verwenden Löschen die Elemente und dann setzen Sie sie wieder ein obwohl das vielleicht nicht allzu flexibel ist.

Ein bisschen mehr Kontext würde Ihnen bessere Antworten einbringen, denke ich.

1405600cookie-checkWie kann ich Elemente mit JavaScript neu anordnen?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy