JQuery: elegante Möglichkeit, Satz von Elementen durch einen anderen Satz zu ersetzen?

Ich habe eine Reihe von DOM wieJQuery: elegante Möglichkeit, Satz von Elementen durch einen anderen Satz zu ersetzen?

<div> 
    <div class="stuff"/> 
    <div class="stuff"/> 
    <div class="stuff"/> 
</div>

und ich möchte es mit einem neuen Satz von Sachen

<div> 
    <div class="stuff"/> 
    <p class="stuff"/> 
    <ul class="stuff"/> 
    <a class="stuff"/> 
</div>

ersetzen, die über Ajax geholt werden. Meine Frage ist: Was ist der beste Weg, dies zu tun?

$.replaceWith tut nicht ganz, was ich will, weil ich dann mit mehreren Kopien der neuen stuff enden.

Ich kann garantieren, dass alle stuff in einem zusammenhängenden Block sein, und so vermutlich nach dem letzten Elemente in einigen Platzhalter setzen (oder vor dem ersten Elemente) der alten stuff, entfernen Sie die alten stuff, ich könnte und ersetzen der Platzhalter mit dem neuen stuff.

Dies scheint jedoch eher umständlich und unelegant. Gibt es einen cleveren Weg, alle alten stuff zu entfernen und eine einzige Kopie des neuen stuff auf einmal zu erstellen?

EDIT: Ich würde auch gerne tun, ohne Container divs zu verwenden. Mit Containern Divs würde im obigen Fall arbeiten, würde aber in einigen Fällen fehlschlagen, wie wenn die stuff innen ist ein <table>:

<table> 
    <head/> 
    <body> 
     <tr/> 
     <tr class="stuff"/> 
     <tr class="stuff"/> 
     <tr class="stuff"/> 
     <tr/> 
    </body> 
</table>

Wenn ich will, um die Zeilen ersetzen markierten stuff mit einem anderen Satz von Zeilen, möglicherweise mehr , möglicherweise weniger, gibt es keine Möglichkeit, ich kann sie schön in ein Container-Ding setzen, ohne das HTML zu brechen, da das <body> nur <tr> s (IIRC) enthalten kann.

Quelle

2012-05-23 Li Haoyi

Sie HTML-Markup scheint falsch! – thecodeparadox

Was hast du probiert, das ist nicht elegant? Es gibt viele Möglichkeiten, dies zu tun, welche hast du versucht? – Joseph

@thecodeparadox hat das Markup repariert. Joseph: der ganze Einfügeplatzhalter, entferne altes Zeug, ersetze Platzhalterding –

$('#outerdiv').empty().append(newContent);

Im Gegensatz zu .html(), wird dies unabhängig davon arbeiten, ob newContent ist ein HTML-String, oder eine bestehende DOM-Struktur.

Wenn es mehrere Elemente ersetzt werden, aber wo Sie ihre Geschwister müssen behalten, können Sie dies tun:

$('.stuff').first().before(newContent).end().remove();

dh die erste .stuff Element, fügen Sie den neuen Inhalten vor, und dann entfernen alle .stuff Elemente.

Quelle

2012-05-23 15:48:10 Alnitak

Das scheint zu funktionieren, ein ich denke, es besteht den" Eleganz "-Test. Danke =) –

Ja: $('#tagetDiv').html(newContent)

Quelle

2012-05-23 15:45:57

Ich hätte es niederschreiben sollen, dass ich keinen Container div dazu verlangen möchte. Ein Container div/span funktioniert in den meisten Fällen, aber gelegentlich (ärgerlicherweise!) Scheitert an den Kanten (Container divs verwirren CSS-Formatierung, ersetzen den Körper/Kopf/Zeilen/Zellen einer Tabelle, etc.). –

@LiHaoyi Wenn Sie keinen Container haben, wie sollen Sie wissen, _welche_ Divs ersetzen? – Alnitak

@Alnitak: durch ihre Klasse 'stuff', die von allen divs geteilt wird, die ich herausziehen und ersetzen möchte –

Eine Möglichkeit wäre es, mit wrapAll zu tun:

$('.stuff').wrapAll('<div/>').parent().replaceWith('<div class="stuff"/>');

Ich bin nicht sicher, ob das den „elegant“ Test bestanden, aber es unabhängig davon funktioniert, ob es gibt andere Inhalte in der Aufnahme Element.

Mit diesem gesagt, scheint dies jedoch eine sehr komplizierte Lösung für ein einfaches Problem zu sein. Die einfache Lösung wäre, Ihre Elemente in ein containing-Element zu verpacken. Dies sollte kein Problem sein, wenn Sie, wie Sie sagen, garantieren können, dass sie immer zusammen sein werden.

Quelle

2012-05-23 15:48:30 lonesomeday

JQuery: elegante Möglichkeit, Satz von Elementen durch einen anderen Satz zu ersetzen?

Antwort

Verwandte Themen