javascript - jQuery 动态 dom 元素内的每个循环

Question

我正在生成一个 dom 元素 <div>使用下面的代码:

jQuery

$('<div/>', {
    'id': 'myid',
    'html': '<table class="table">'
    + '<tr><th>Heading</th><th>Heading</th><th>Heading</th></tr>'

    +'</table>'
}).appendTo($body);

一切都很好。我想循环遍历我的数据以创建实际的表行，但我得到了实际的输出(我认为这是有道理的)。只是不知道如何不这样做。

例如:

jQuery

$('<div/>', {
    'id': 'myid',
    'html': '<table class="table">'
    + '<tr><th>Heading</th><th>Heading</th><th>Heading</th></tr>' +
        $.each(data.thing, function(i, val){
         '<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
        });                                      
    +'</table>'
}).appendTo($body);

但是，我得到的结果是:

HTML

[object Object],[object Object],[object Object],[object Object],[object Object],[object    
Object],[object Object],[object Object]

Heading Heading Heading

Answer 1

$.each() 返回它所作用的对象(data.thing，此处)。您将看到它的字符串化版本。

您不能真正将循环作为数据定义的一部分。最好事后这样做:

var table = $('<table class="table">' +
                 '<tr><th>Heading</th><th>Heading</th><th>Heading</th></tr>' +
              '</table>');

$.each(data.thing, function(i, val){
  table.append( '<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>' );
});

$('<div>').
  attr('id', 'myid').
  append(table).
  appendTo($body);

示例:http://codepen.io/paulroub/pen/dvnKE