JavaScript-Bewegungselement im DOM

Sagen wir, ich habe drei <div> Elemente auf einer Seite. Wie kann ich die swap-Positionen der ersten und Dritten <div>? jQuery ist in Ordnung.

InformationsquelleAutor der Frage core | 2009-09-01

  1. 93

    Trivial mit jQuery

    $('#div1').insertAfter('#div3');
$('#div3').insertBefore('#div2');

    Wenn Sie möchten, tun Sie wiederholt, müssen Sie mit verschiedenen Selektoren da die divs sind, behalten Ihre ids, wie Sie bewegt werden.

    $(function() {
    setInterval( function() {
        $('div:first').insertAfter($('div').eq(2));
        $('div').eq(1).insertBefore('div:first');
    }, 3000 );
});

    InformationsquelleAutor der Antwort tvanfosson

  2. 126

    Gibt es keine Notwendigkeit für die Verwendung einer Bibliothek für eine so triviale Aufgabe:

    var divs = document.getElementsByTagName("div");   //order: first, second, third
divs[2].parentNode.insertBefore(divs[2], divs[0]); //order: third, first, second
divs[2].parentNode.insertBefore(divs[2], divs[1]); //order: third, second, third

    Dies trägt der Tatsache Rechnung, dass getElementsByTagName gibt eine live-NodeList, die automatisch aktualisiert, um die Reihenfolge der Elemente in den DOM-wie Sie manipuliert werden.

    Könnte man auch verwenden:

    var divs = document.getElementsByTagName("div");   //order: first, second, third
divs[0].parentNode.appendChild(divs[0]);           //order: second, third, first
divs[1].parentNode.insertBefore(divs[0], divs[1]); //order: third, second, third

    und gibt es verschiedene andere mögliche Permutationen, wenn Sie Lust haben, zu Experimentieren:

    divs[0].parentNode.appendChild(divs[0].parentNode.replaceChild(divs[2], divs[0]));

    zum Beispiel 🙂

    InformationsquelleAutor der Antwort NickFitz

  3. 9
    jQuery.fn.swap = function(b){ 
    b = jQuery(b)[0]; 
    var a = this[0]; 
    var t = a.parentNode.insertBefore(document.createTextNode(''), a); 
    b.parentNode.insertBefore(a, b); 
    t.parentNode.insertBefore(b, t); 
    t.parentNode.removeChild(t); 
    return this; 
};

    und verwenden Sie es wie diese:

    $('#div1').swap('#div2');

    wenn Sie nicht wollen, um jQuery verwenden könnten Sie leicht anpassen, die Funktion.

    InformationsquelleAutor der Antwort Darin Dimitrov

  4. 4
    var swap = function () {
    var divs = document.getElementsByTagName('div');
    var div1 = divs[0];
    var div2 = divs[1];
    var div3 = divs[2];

    div3.parentNode.insertBefore(div1, div3);
    div1.parentNode.insertBefore(div3, div2);
};

    Diese Funktion mag seltsam erscheinen, aber es stützt sich stark auf standards, um richtig zu funktionieren. In der Tat kann es scheinen besser zu funktionieren als die jQuery-version, die tvanfosson gepostet, die scheint, zu tun, die tauschen nur zweimal.

    Welche Normen Besonderheiten gilt es Vertrauen?

    insertBefore
    Fügt den Knoten newChild vor den vorhandenen untergeordneten node refChild. Wenn
    refChild ist null, insert newChild an
    am Ende der Liste der Kinder.
    Falls newChild ist ein DocumentFragment-Objekt, alle seine Kinder sind
    eingefügt, in der gleichen Reihenfolge vor
    refChild. Wenn die newChild bereits
    in der Struktur, es wird zuerst entfernt.

    InformationsquelleAutor der Antwort Ionuț G. Stan

  5. 3

    .vor und .nach

    Verwenden moderne vanilla JS! Die Weise, die besser/sauberer als vorher

    const div1 = document.getElementById("div1");
const div2 = document.getElementById("div2");
const div3 = document.getElementById("div3");

div2.after(div1);
div2.before(div3);

    Browser-Unterstützung - 84% Global, 87% aus den USA, wie von Mar '18

    InformationsquelleAutor der Antwort Gibolt

  6. 0

    Jquery-Ansatz erwähnt, auf die Spitze arbeiten.
    Sie können auch verwenden, JQuery und CSS .Sagen für e.g auf ein Div, die Sie angewendet haben class1 und div2, die Sie angewendet haben Klasse class2 (sagen wir für e.g-Klasse von css stellt eine spezifische position auf dem browser), können Sie jetzt tauschen Sie die Klassen jquery oder javascript (das wird sich ändern die position)

    InformationsquelleAutor der Antwort Rajat

  7. 0

    Sorry für diesen thread stoßen
    Ich stolperte über die "swap-DOM-Elemente-problem" und ein wenig rumprobiert

    Das Ergebnis ist ein jQuery-native "Lösung" zu sein scheint ist auch wirklich schön (leider weiß ich nicht was ist passiert auf der jQuery-Interna, wenn dies zu tun)

    Code:

    $('#element1').insertAfter($('#element2'));

    Die jQuery-Dokumentation sagt, dass insertAfter() bewegt das element und nicht Klonen

    InformationsquelleAutor der Antwort storrm

Schreibe einen Kommentar