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

Answer 2

您可以使用$.map()进行迭代，然后使用join()来合并结果。

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

请注意，迭代函数必须为return字符串 - 只需将字符串作为语句写入就不会返回它。

jQuery动态dom元素中的每个循环

2 个答案: