追加内的for循环不起作用答案

【问题标题】：for loop inside the append is not working追加内的for循环不起作用
【发布时间】：2013-08-08 16:40:13
【问题描述】：

下面是我的代码。

$("<table/>",{"cellspacing":"0","cellpadding":"0","border":"0","width":"100%"})
.append(
$("<tbody/>")
.append(function(){

    options=["ONE","TWO","THREE","FOUR"];
    $.each(options, function(val) {
        return ($("<tr/>")
        .append(
            $("<td/>").html("4/6/2013 10:41"),
            $("<td/>").html("5/6/2013 10:42"),
            $("<td/>").html(val),
            $("<td/>").html("<img src='pdf_16x16.png'/>"),
            $("<td/>").html("<a href='#'>Re-Upload Documents</a>")
        ));
    })

})
).appendTo("body");

追加内的for循环不起作用。

【问题讨论】：

val 是这里的索引。这是你所期望的吗？ ` $.each(options, function(i,val) {...});` ?
你的 html 看起来怎么样？
错字：append 后面有两个右括号，需要大括号和一个括号：});

标签： jquery for-loop jquery-append

【解决方案1】：

试试看

$.each(options, function(val) {
    return ($("<tr/>")
    .append(
        $("<td/>").html("4/6/2013 10:41") + 
        $("<td/>").html("5/6/2013 10:42") +
        $("<td/>").html(val) +
        $("<td/>").html("<img src='pdf_16x16.png'/>") +
        $("<td/>").html("<a href='#'>Re-Upload Documents</a>")
    ));
})

【讨论】：

【解决方案2】：

问题是因为您没有从 append 函数返回任何内容，而只是其中的 each 循环。试试这个：

$("<tbody/>").append(function(){
    options = ["ONE","TWO","THREE","FOUR"];
    var $container = $('<table></table>');

    $.each(options, function(val) {
        $container.append($("<tr/>").append(
            $("<td/>").html("4/6/2013 10:41"),
            $("<td/>").html("5/6/2013 10:42"),
            $("<td/>").html(val),
            $("<td/>").html("<img src='pdf_16x16.png'/>"),
            $("<td/>").html("<a href='#'>Re-Upload Documents</a>")
        ));
    });

    return $container.html();
});

Example fiddle

【讨论】：

谢谢。这是工作。但它应该是容器变量中的 tr 而不是 div。太棒了！
@Natesan 为什么？他返回的是内容而不是元素。也许他可以使用 TABLE 但不能使用 TR

【解决方案3】：

试试

var tbody = $("<tbody/>").appendTo($("<table/>", {
    "cellspacing" : "0",
    "cellpadding" : "0",
    "border" : "0",
    "width" : "100%"
}).appendTo("body"));

options = ["ONE", "TWO", "THREE", "FOUR"];
$.each(options, function(key, val) {
    return tbody
    .append($("<tr/>")
            .append($("<td/>").html("4/6/2013 10:41"))
            .append($("<td/>").html("5/6/2013 10:42"))
            .append($("<td/>").html(val))
            .append($("<td/>").html("<img src='pdf_16x16.png'/>"))
            .append($("<td/>").html("<a href='#'>Re-Upload Documents</a>")));
})

演示：Fiddle

【讨论】：

【解决方案4】：

尝试以下：

$("<table/>",{"cellspacing":"0","cellpadding":"0","border":"0","width":"100%"})
.append("<tbody></tbody>").appendTo("body");

$("tbody").append(function(){
  options = ["ONE","TWO","THREE","FOUR"];
   var $container = $('<div></div>');

$.each(options, function(val) {
    $container.append($("<tr/>").append(
        $("<td/>").html("4/6/2013 10:41"),
        $("<td/>").html("5/6/2013 10:42"),
        $("<td/>").html(val),
        $("<td/>").html("<img src='pdf_16x16.png'/>"),
        $("<td/>").html("<a href='#'>Re-Upload Documents</a>")
    ));
});

  return $container.html();
});

在这里工作小提琴：http://jsfiddle.net/mCLsm/2/

【讨论】：