使用jQuery从AJAX请求中断HTML
问题描述:
我正在解析XML文件并尝试将输出返回给div。但是,由于某些原因.append()似乎没有生成正确的HTML输出。使用jQuery从AJAX请求中断HTML
这里是JQuery的片段:
这将产生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构建为一个字符串,然后一次追加整个字符串。
完美工作。谢谢Chetan! – 2009-12-02 19:21:50