0

假设我有一些看起来像这样的数据

<data>
    <location>
        <type>main</type>
    </location>
    <location>
        <type>mailing</type>
    </location>
</data>

然后是一些看起来像这样的代码

$('location',data).each(function(){

          var x='<table><tr><td>Type:</td><td>'+$(data).find('type').text()+'</td></tr></table>';
         $('#output').html(x);
});

我从运行得到的结果是

类型:主邮件

我不明白为什么它不执行以下操作,因为对于每个位置元素,它应该再次运行代码,对吗?

类型:主要

类型:邮寄

4

3 回答 3

2

你应该使用append()而不是html()你应该使用你当前正在处理的项目里面each()

var data = "<data><location><type>main</type></location><location><type>mailing</type></location></data>";

$('location', data).each(function(index, item) {
    var x = '<table><tr><td>Type:</td><td>' + $(item).find('type').text() + '</td></tr></table>';
    $('#output').append(x);
});​

这是一个工作演示

于 2012-11-13T18:09:41.357 回答
2

因为您不断覆盖以前的值。

.html()不会附加到其中的内容,它会覆盖它。

奇怪的是,您正在创建 spearte 表,而不仅仅是行,而是基本思想

var x='<table><tr><td>Type:</td><td>'+$(this).find('type').text()+'</td></tr></table>';
$('#output').append(x);

我会期待更多类似的东西

var table = "<table><tbody>";
$(data).find('location').each(function(){
   table += "<tr><th>Type:</th><td>'+$(this).find('type').text()+'</td></tr>';
});
table += "</tbody></table>";
$('#output').html(table);
于 2012-11-13T18:06:49.710 回答
2

你似乎得到Type: mainmailing

因为您似乎在整个数据中找到它,而不是在当前位置标签中。

$(data).find('type').text()

应该是

$(this).find('type').text();

此外,您还不断覆盖每个循环迭代中的值。将附加内容移到循环外部。

var x = '<table>'
$('location','data').each(function(){
     x +='<tr><td>Type:</td><td>'+$(this).find('type').text()+'</td></tr>';   
});
x += '</table>'
$('#output').html(x);

检查小提琴

于 2012-11-13T18:08:05.440 回答