2012-10-01 10 views
9

halten Wenn wir eine beispielhafte Struktur wie diese:Wie eine jQuery Referenz verwendet replaceWith

HTML

<div id="foo">hello foo</div> 

JS

var $foo = $('#foo'); 

und wir müssen die ersetzen gesamtes HTML-Markup für diese angegebene jQuery/node-Referenz mit der Methode .replaceWith von jQuery , Was ist die beste Vorgehensweise, um eine neue Knotenreferenz zu erhalten bzw. zu erhalten??

Das Problem, .replaceWith gibt den Verweis auf das alte jQuery Objekt zurück (das klingt mehr oder weniger unvernünftig für mich). Aus der Dokumentation:

Es muss jedoch beachtet werden, dass das ursprüngliche jQuery-Objekt zurückgegeben wird. Dieses Objekt verweist auf das Element, das aus dem DOM entfernt wurde, , nicht das neue Element, das es ersetzt hat.

Wenn ich gehe wie

$foo = $foo.replaceWith('<div>new content</div>'); 

würde Ich mag haben, dass die neuen Knoten referenziert/in der gleichen Variable zwischengespeichert. Ja, Sie könnten den neu eingefügten DOM-Knoten erneut abfragen, aber das scheint mir sehr klobig zu sein.

Gibt es einen kniffligen Weg, dies zu erreichen, ohne das DOM erneut abfragen zu müssen?

Beispiel: http://jsfiddle.net/Lm7GZ/1/

+0

Nur einiger Hintergrund: Obwohl ich, warum Sie das Gefühl, als ob die Rückkehr des _ „alten“ _ Referenz unzumutbar ist (oder unlogisch) macht es Sinn. Angenommen, Sie haben mehrere Ereignis-Listener an dieses Element gebunden, abhängig von den Aktionen des Benutzers müssen alle diese Listener und Callbacks entfernt werden (um Undichtigkeiten zu vermeiden), aber Sie möchten einige davon für die spätere Verwendung behalten möchte das alte Element wiederherstellen. Wenn das alte DOM-Element vollständig entfernt würde, würde dies bedeuten, dass alle Zuhörer erneut eingebunden würden. Dies würde sich, wenn überhaupt, noch klobiger anfühlen und Ihr Skript verlangsamen. –

+0

@EliasVanOotegem: Ich bin mir nicht sicher, ob ich dich richtig verstehe, aber für diesen Fall gibt es '.fn.detach() 'available, was viel sinnvoller wäre, einen" alten "Verweis auf einen Knoten mit allen Listenern und Daten explizit zu speichern, wenn Sie möchten. Aber ich habe nur ".replaceAll" übersehen, was ziemlich genau das tut, was ich erwartet habe. –

+0

Ich habe gerade über einen Fall nachgedacht, den ich kürzlich kennengelernt habe, vielleicht würde mein Kommentar dann mehr Sinn ergeben: Angenommen, eine Tabelle mit etwas html, Beim Klick wird eine Zeile durch ein Formular mit der Methode 'replaceWith' ersetzt. Nachdem das Formular übergeben wurde (Ajax), werden die ursprünglichen Knoten zusammen mit ihren Listenern und Handlern wiederhergestellt, die niemals "weg" waren. kurz: die neuen Knoten waren temporär, die "alten" nicht. Das ist der Zeitpunkt, an dem ein Verweis auf die alten Knoten praktisch ist, um herumzuliegen, keine Notwendigkeit, irgendetwas zu lösen und wieder anzubringen ... –

Antwort

7

Verwenden Sie die .replaceAll() Funktion:

$foo = $('<div>new content</div>').replaceAll($foo); 
3

Sie replaceAll() verwenden können, um die Quelle mit dem Ziel Swapping:

$foo = $('<div>new content</div>').replaceAll($foo); 
0

Wir beiden Richtungen von der Verwendung können folgende:

$foo = $('<div id="foo">hello foo</div>').replaceAll('#foo'); //As a target string; 

ODER

$foo = $('#foo'); 
$foo = $('<div id="foo">hello foo</div>').replaceAll($foo); //As a jQuery Object; 

Auch können wir die verkettete Abfragen tun:

$('<div id="foo">hello foo</div>').replaceAll('#foo').find('something into the newly added html')...... 
Verwandte Themen