Beschädigter HTML Von Ajax-Request mit JQuery

StackOverflow https://stackoverflow.com/questions/1834912

  •  11-09-2019
  •  | 
  •  

Frage

Ich bin Parsen einer XML-Datei und versuchen, die Ausgabe in eine div zurückzukehren. Doch aus irgendeinem Grund .append () scheint nicht die richtige HTML-Ausgabe zu erzeugen.

Hier ist der JQuery-Schnipsel: 

var list = $('<div class="response">').appendTo(this);
list.append('<ul>');

$('item',data).each(function(i){
    var dow = $(this).find("day").text();
    var high = $(this).find("high").text();
    var low = $(this).find("low").text();
    var conditions = $(this).find("conditions").text();
    var icon = $(this).find("icon").text();

    list.append('<li style="background: url(' + icon + '.gif) no-repeat;"><b>' + dow + '</b> - ' + conditions + ' (Hi: ' + high + ', Low: ' + low + ')</li>');          
});

Der HTML erzeugt dies ist wie folgt: 

<div class="response"></div>
<ul></ul>
    <li style="background: url(partlycloudy.gif) no-repeat;"><b>Wednesday</b> - Partly Cloudy (Hi: 50, Low: 43)</li>
    <li style="background: url(partlycloudy.gif) no-repeat;"><b>Thursday</b> - Partly Cloudy (Hi: 59, Low: 34)</li>
    <li style="background: url(partlycloudy.gif) no-repeat;"><b>Friday</b> - Partly Cloudy (Hi: 45, Low: 25)</li>
    <li style="background: url(chancesnow.gif) no-repeat;"><b>Saturday</b> - Chance of Snow (Hi: 36, Low: 22)</li>
    <li style="background: url(partlycloudy.gif) no-repeat;"><b>Sunday</b> - Partly Cloudy (Hi: 36, Low: 20)</li>
    <li style="background: url(partlycloudy.gif) no-repeat;"><b>Monday</b> - Partly Cloudy (Hi: 34, Low: 20)</li>

Jede Idee, warum die Tags vorzeitig geschlossen werden? Ich bin auf ein bisschen ratlos. Wenn es eine andere Möglichkeit ist, sollte ich dies tun, würde ich schätzen Sie mich in die richtige Richtung.

Vielen Dank im Voraus!

War es hilfreich?

Lösung

append() ist kein String anhängen. Es arbeitet auf dem Live-DOM, wie Sie gehen. Wenn Sie einen <ul> anhängen, fügt es automatisch den schließenden Tag. Was auch immer Sie zu dem Markup hinzufügen danach später kommt.

Stattdessen versuchen diese. 

var list = $('<div class="response">').appendTo(this);
var ul = $('<ul></ul>');

$('item',data).each(function(i){
    var dow = $(this).find("day").text();
    var high = $(this).find("high").text();
    var low = $(this).find("low").text();
    var conditions = $(this).find("conditions").text();
    var icon = $(this).find("icon").text();

    ul.append('<li style="background: url(' + icon + '.gif) no-repeat;"><b>' + dow + '</b> - ' + conditions + ' (Hi: ' + high + ', Low: ' + low + ')</li>');          
});
list.append(ul);

Andere Tipps

Wenn Sie die UL anfügen, fügt es ein voll ausgebildet und geschlossene Element. Es ist besser, die gesamte HTML als String aufzubauen und dann auf einmal die gesamte Zeichenfolge anhängen.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top