Sie sind sich nicht sicher, ob der Titel stimmt. Bitte schlagen Sie Änderungen vor, wenn Sie nicht einverstanden sind.

Ich habe mit Inhalten gearbeitet, die über jquery (.load ()) in ein div geladen wurden. Ich musste einige Elemente aus dem geladenen Inhalt entfernen. Ich habe dies auf die gleiche Weise getan wie im jsfiddle-Beispiel, das ich geschrieben habe (http://jsfiddle.net/AzxaL/). 12). Dieser verwendet keine load () -Funktion, die eine ID-Duplizierung erzeugt, dies ist jedoch irrelevant.

Die Frage ist: Warum eine Arbeit und eine andere nicht und was muss sich sonst ändern, wenn (this.tagName == 'H2') {$ (this) .remove (); } des nicht funktionierenden Beispiels?

Um Ihnen das Aufspüren von Unterschieden zu ersparen, befindet sich die einzige in der / * Interessenlinie * /

Arbeiten

$('#copy_working_box').html($('#copy_working_box').children('#wrapper').children()).fadeIn(300);

Funktioniert nicht

$('#copy_working_not_box').html(content).fadeIn(300);

Beachten Sie auch, dass im nicht funktionierenden Beispiel der div # -Unterinhalt entfernt wird, nur das h2 nicht.

P.S. Ich suche nach Klarstellung, da ich verstehe, dass dieses Problem nur aufgrund meines fehlerhaften Verständnisses der Funktionsweise dieses Beispiels besteht.

Danke im Voraus.

0
StrayObject 9 Okt. 2012 im 15:18

3 Antworten

Beste Antwort

Wenn Sie dies tun:

var content = $('#copy_working_not_box').children('#wrapper').children();

Sie erhalten ein jQuery-Objekt, das zum Zeitpunkt der Ausführung des Codes eine Liste von Elementen enthält. Diese Liste ist nicht dynamisch. Wenn Sie also eines (oder mehrere) dieser Elemente aus dem DOM entfernen (mit .remove()), wird die Liste der Elemente im Objekt nicht aktualisiert. Änderungen am Inhalt dieser Elemente werden jedoch wiedergegeben, da Ihr jQuery-Objekt Verweise auf die DOM-Elemente enthält.


Wenn Sie Elemente mit der Funktion jQuery auswählen, in diesem Fall mit dem folgenden Code:

var content = $('#copy_working_not_box').children('#wrapper').children();

Am Ende erhalten Sie ein jQuery-Objekt, das die Verweise auf die entsprechenden DOM-Elemente enthält. jQuery-Objekte sind Array-ähnlich (sie haben eine length -Eigenschaft, und auf einzelne Elemente kann mit der eckigen Klammer [0] zugegriffen werden), sodass wir sie für unsere Zwecke einfach als Array von Elementen betrachten können.

Angesichts des HTML-Codes, mit dem wir arbeiten, würde dieses Array aus einem <h2> -Element und einem <div> -Element mit dem id von content bestehen. Zur Veranschaulichung werden wir dies folgendermaßen darstellen:

[<h2>, <div#content>]

Jetzt beschäftigen wir uns mit zwei Fällen in Ihrem Code.

  1. Entfernen eines Elements aus dem DOM, das von einem DOM-Element in unserem Array (jQuery-Objekt) abstammt.
  2. Entfernen eines Elements aus dem DOM, das eines der DOM-Elemente in unserem Array ist.

Im ersten Fall beginnen wir mit dem Verweis auf das Element in unserem jQuery-Objekt. das ist das <div#content> Element. Wir greifen dann auf seine untergeordneten Elemente zu - [<p>, <div#subcontent>], filtern dies auf <div#subcontent> und entfernen es. Da unser Array immer noch einen Verweis auf <div#content> enthält und dieser wiederum Verweise auf seine Nachkommen enthält, wirkt sich diese Änderung am DOM darauf aus (der Verweis auf das untergeordnete <div#subcontent> wird aus {{X5} entfernt). }).

Im zweiten Fall beginnen wir mit dem Verweis auf das Element in unserem jQuery-Objekt. das ist das <h2> Element. Wir entfernen dann einfach dieses Element - das es aus dem DOM entfernt, sodass alle Verweise darauf in anderen DOM-Elementen (d. H. Seinen Vorfahren) aktualisiert werden. Wir haben jedoch immer noch einen Verweis auf das DOM-Element selbst, das in unserem jQuery-Objekt gespeichert ist.

1
Anthony Grist 9 Okt. 2012 im 20:53

In Ihrem Code tun Sie

var content = $('#copy_working_not_box').children('#wrapper').children();

Und dann

.html(content)

Bitte beachten Sie, dass die Methode jQuery.html(htmlString) die htmlString als Eingabe und nicht object verwendet.

Vielleicht möchten Sie .html(content.html()); tun

0
Anshu 9 Okt. 2012 im 11:32

Warum nicht die jQuery-Filter verwenden, um die Elemente zu entfernen?

$('#copy_working').click(function() {
    var $clone = $('#wrapper').clone();

    // remove unwanted elements
    $clone.find('#content #subcontent, h2').remove()

    $('#copy_working_box')
        .hide()
        .html($clone)
        .fadeIn(300);
});
2
SuperSkunk 9 Okt. 2012 im 11:38