Сломанный HTML-код из запроса AJAX с использованием JQuery

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

  •  11-09-2019
  •  | 
  •  

Вопрос

Я анализирую XML-файл и пытаюсь вернуть вывод в div.Однако по какой-то причине .append() не генерирует правильный вывод HTML.

Вот фрагмент JQuery:

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>');          
});

HTML-код, который это создает, выглядит следующим образом:

<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>

Есть идеи, почему теги закрываются преждевременно?Я в некоторой растерянности.Если есть другой способ сделать это, я был бы признателен, если бы вы указали мне правильное направление.

Заранее спасибо!

Это было полезно?

Решение

append() не является добавлением строки.Он работает над живым DOM по ходу дела.Когда вы добавляете <ul>, он автоматически добавляет закрывающий тег.Все, что вы добавите в разметку после этого, произойдет позже.

Вместо этого попробуйте это.

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);

Другие советы

Когда вы добавляете UL, он добавляет полностью сформированный и закрытый элемент.Лучше создать весь HTML в виде строки, а затем добавить всю строку сразу.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top