Hallo, ich bin verwirrt mit den Funktionen .append () und .html () von jquery.

Ich habe dies innerhalb des AJAX-Erfolgs:

success: function(response){

$('#imodal').html('Success!').addClass("flash-success").fadeIn();

$('#imodal').append(response);

}

Dies zeigt im Grunde eine Art Flash-Nachricht in einem grünen Hintergrund mit der Klasse "Flash-Erfolg" und der Antwort von einer JSON-Codierung , die die erforderlichen Informationen über die Transaktion enthält das ist gerade passiert.

Mein Problem ist, dass die Klasse "Flash-Erfolg" auch in der angehängten Antwort vorhanden ist. Wie mache ich die Klassen dieser beiden unterschiedlich? Ich habe es versucht:

$('#imodal').html('Success!').addClass("flash-success").fadeIn();

$('#imodal').append(response).removeClass("flash-success");

Aber kein Glück. Die angehängte Antwort ist immer noch grün und hat wahrscheinlich die Klasse "Flash-Erfolg". Vielen Dank für die Hilfe!

0
muffin 2 Dez. 2013 im 10:09

4 Antworten

Beste Antwort

JQuery append () fügt Inhalt / Element am Ende des Containers ein, ohne dessen Inhalt zu ersetzen. http://api.jquery.com/append/

Wobei jQuery html () den Inhalt im Container mit Daten und HTML-Formatierung überschreibt http://api.jquery.com/html/

My problem is, the class "flash-success" is also present in the appended response

Weil Sie dem Anhang selbst eine Klasse hinzufügen html('Success!').addClass("flash-success")

Versuchen:

$('#imodal').append(response); // Append the child to element
$('#imodal').addClass("flash-success"); // add class to container
1
sravis 2 Dez. 2013 im 06:22

Sie müssen einfach die Klasse "Flash-Erfolg" hinzufügen, nachdem Sie Ihre Antwort angehängt haben.

$("#imodal").append(response)
$("#imodal").addClass("flash-success")

Sie können das gewünschte Ergebnis erzielen ----

0
Arjun 2 Dez. 2013 im 06:36

Die Methode jQuery .append () fügt den Inhalt am Ende des Elements hinzu. In Ihrem Fall wird dem DOM-Element "Antwort" mit der ID "imodal" hinzugefügt.

Wenn Sie möchten, dass das nach der blinkenden Klasse hinzugefügt wird, sollten Sie die "Antwort" an ein anderes DOM-Element anhängen, das sich nach der blinkenden Klasse befindet.

1
Ken Thai 2 Dez. 2013 im 06:18

$('#imodal').append(response).removeClass("flash-success"); Dadurch wird die Klasse nicht aus der angehängten Antwort entfernt, sondern nach der Klasse im Element #imodal gesucht, das nicht vorhanden ist. Wenn Ihre Antwort HTML-Code ist, sollten Sie Folgendes tun: $(response).removeClass("flash-success");

1
Neha Choudhary 2 Dez. 2013 im 06:33