Question

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

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

我从运行它得到的结果是

输入：mainmailing

我不明白为什么它没有执行以下操作，因为对于每个位置元素，它应该再次运行代码，对吧？

输入：main

输入：邮寄

Answer 1

因为你继续覆盖以前的值。

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

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

<强> Check Fiddle

Answer 3

您应该使用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);
});

这是一个有效的demo。

为什么不用each（）创建多个标签？

3 个答案: