Kann ich problemlos zwei Elemente mit jQuery austauschen?
Ich möchte dies nach Möglichkeit mit einer Zeile tun.
Ich habe ein Auswahlelement und zwei Schaltflächen, um die Optionen nach oben oder unten zu verschieben. Ich habe bereits die Auswahl- und die Zielauswahl eingerichtet. Ich mache dies mit einem Wenn, aber ich habe mich gefragt, ob es einen einfacheren Weg gibt.
jquery
swap
javascript
Juan
quelle
quelle
Antworten:
Ich habe einen interessanten Weg gefunden, dies nur mit jQuery zu lösen:
oder
:) :)
quelle
Paulo hat recht, aber ich bin mir nicht sicher, warum er die betreffenden Elemente klont. Dies ist nicht wirklich notwendig und verliert alle Referenzen oder Ereignis-Listener, die den Elementen und ihren Nachkommen zugeordnet sind.
Hier ist eine nicht klonende Version mit einfachen DOM-Methoden (da jQuery keine speziellen Funktionen hat, um diesen bestimmten Vorgang zu vereinfachen):
quelle
Nein, gibt es nicht, aber Sie könnten eine zaubern:
Verwendung:
Beachten Sie, dass dies nur funktioniert, wenn die Selektoren jeweils nur einem Element entsprechen. Andernfalls kann es zu seltsamen Ergebnissen kommen.
quelle
Es gibt viele Randfälle zu diesem Problem, die nicht von der akzeptierten Antwort oder der Antwort von Bobince behandelt werden. Andere Lösungen, die das Klonen beinhalten, sind auf dem richtigen Weg, aber das Klonen ist teuer und unnötig. Wir sind versucht zu klonen, weil es ein uraltes Problem gibt, wie zwei Variablen ausgetauscht werden können. In einem der Schritte wird eine der Variablen einer temporären Variablen zugewiesen. Die Zuweisung (Klonen) ist in diesem Fall nicht erforderlich. Hier ist eine jQuery-basierte Lösung:
quelle
Viele dieser Antworten sind für den allgemeinen Fall einfach falsch, andere sind unnötig kompliziert, wenn sie überhaupt funktionieren. Die jQuery
.before
und die.after
Methoden machen das meiste, was Sie wollen, aber Sie benötigen ein drittes Element, wie viele Swap-Algorithmen funktionieren. Es ist ziemlich einfach: Erstellen Sie ein temporäres DOM-Element als Platzhalter, während Sie Dinge verschieben. Es besteht keine Notwendigkeit, Eltern oder Geschwister anzusehen, und sicherlich keine Notwendigkeit, zu klonen ...1) Stellen Sie das temporäre Div
temp
vorthis
2) bewegen ,
this
bevorthat
3) bewegen Sie sich
that
nachtemp
3b) entfernen
temp
Dann einfach
DEMO: http://codepen.io/anon/pen/akYajE
quelle
Sie sollten nicht zwei Klone benötigen, einer reicht aus. Wenn wir die Antwort von Paolo Bergantino nehmen, haben wir:
Sollte schneller sein. Das Übergeben des kleineren der beiden Elemente sollte ebenfalls die Dinge beschleunigen.
quelle
Ich habe vorher eine solche Technik angewendet. Ich verwende es für die Connector-Liste auf http://mybackupbox.com
quelle
end()
wenn Sie die Kette nicht fortsetzen. wie wäre es$('element1').clone().before('element2').end().replaceWith('element2');
clone()
behält keine Abfrage bei, esdata()
sei denn, Sie geben anclone(true)
- eine wichtige Unterscheidung, wenn Sie sortieren, damit Sie nicht alle Ihre Daten verlierenIch habe eine Funktion erstellt, mit der Sie mehrere ausgewählte Optionen nach oben oder unten verschieben können
Abhängigkeiten:
Zunächst wird geprüft, ob sich die erste / zuletzt ausgewählte Option nach oben / unten bewegen kann. Dann durchläuft es alle Elemente und Aufrufe
quelle
ein anderer ohne Klonen:
Ich muss ein tatsächliches und ein nominales Element austauschen:
dann
insert <div> before
undremove
danach werden nur benötigt, wenn Sie nicht sicherstellen können, dass es immer ein Element vor gibt (in meinem Fall ist es)quelle
.prev()
der Länge suchen und wenn 0, dann.prepend()
nach.parent()
:) Auf diese Weise müssen Sie keine zusätzlichen Elemente erstellen.Schauen Sie sich das jQuery-Plugin "Swapable" an.
http://code.google.com/p/jquery-swapable/
Es basiert auf "Sortierbar" und sieht aus wie sortierbar (Drag-and-Drop, Platzhalter usw.), tauscht jedoch nur zwei Elemente aus: Ziehen und Ablegen. Alle anderen Elemente sind nicht betroffen und bleiben an ihrer aktuellen Position.
quelle
Dies ist eine Antwort, die auf der Antwortlogik von @lotif basiert, jedoch etwas allgemeiner ist
Wenn Sie append / prepend nach / vor die Elemente tatsächlich bewegt
=> keine clonning benötigt
=> Veranstaltungen gehalten
Es gibt zwei Fälle, die auftreten können
.prev()
ious" => wir können das andere Ziel.after()
so setzen..parent()
=> wir können.prepend()
das andere Ziel zum Elternteil machen.Der Code
Dieser Code könnte noch kürzer gemacht werden, aber ich habe ihn aus Gründen der Lesbarkeit so gehalten. Beachten Sie, dass das Vorlagern von Eltern (falls erforderlich) und vorherigen Elementen obligatorisch ist.
... zögern Sie nicht, den inneren Code in eine Funktion zu verpacken :)
Beispiel-Geige hat zusätzliche Klickereignisse angehängt, um die Ereigniserhaltung zu demonstrieren ...
Beispiel-Geige: https://jsfiddle.net/ewroodqa/
... wird für verschiedene Fälle funktionieren - sogar für einen wie:
quelle
Dies ist meine Lösung, um mehrere untergeordnete Elemente innerhalb des übergeordneten Elements nach oben und unten zu verschieben. Funktioniert gut zum Verschieben ausgewählter Optionen in Listbox (
<select multiple></select>
)Nach oben gehen:
Sich abwärts bewegen:
quelle
Wenn Sie zwei im jQuery-Objekt ausgewählte Elemente austauschen möchten, können Sie diese Methode verwenden
http://www.vertstudios.com/blog/swap-jquery-plugin/
quelle
Ich wollte eine Lösung, die clone () nicht verwendet, da sie Nebenwirkungen mit angehängten Ereignissen hat. Hier ist, was ich letztendlich getan habe
Es darf nicht mit jQuery-Objekten verwendet werden, die mehr als ein DOM-Element enthalten
quelle
Wenn Sie mehrere Kopien von jedem Element haben, müssen Sie natürlich etwas in einer Schleife tun. Ich hatte diese Situation vor kurzem. Die zwei sich wiederholenden Elemente, die ich wechseln musste, hatten Klassen und einen Container div als:
Mit dem folgenden Code konnte ich alles durchlaufen und umkehren ...
quelle
Ich habe es mit diesem Ausschnitt gemacht
quelle
Ich habe eine Tabelle zum Ändern der Reihenfolge von obj in der verwendeten Datenbank .after () .before () erstellt, also ist dies von dem, was ich experimentiert habe.
Ist obj1 vor obj2 und einfügen
mach das umgekehrt.
Wenn also obj1 nach obj3 und obj2 nach obj4 steht und Sie die Orte obj1 und obj2 ändern möchten, werden Sie es wie folgt tun
Dies sollte es übrigens tun. Sie können .prev () und .next () verwenden, um obj3 und obj4 zu finden, wenn Sie noch keinen Index dafür hatten.
quelle
Wenn NodeA und NodeB Geschwister sind, zwei
<tr>
in derselben mögen<tbody>
, können Sie sie einfach verwenden$(trA).insertAfter($(trB))
oder austauschen$(trA).insertBefore($(trB))
, es funktioniert für mich. und Sie müssen$(trA).remove()
vorher nicht anrufen , sonst müssen Sie einige Klickereignisse erneut binden$(trA)
quelle
Erstellen Sie eine solche jQuery-Funktion
Vielen Dank an Yannick Guinness unter https://jsfiddle.net/ARTsinn/TVjnr/
quelle
Die beste Option ist, sie mit der Methode clone () zu klonen.
quelle
Ich denke, Sie können es sehr einfach machen. Nehmen wir zum Beispiel an, Sie haben die nächste Struktur: ...
und das Ergebnis sollte sein
jquery:
Ich hoffe, es hilft!
quelle