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

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字符串-僅將字符串寫為語句不會返回它。