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

jQuery each loop inside of dynamic dom element

本文关键字：动态 dom 元素 内部 循环 jQuery      更新时间：2023-09-26

我正在使用下面的代码生成一个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);

但是，我得到这个结果:

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

$.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

您可以使用$.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——仅仅将字符串作为语句写入不会返回它。

相关文章：