javascript - jQuery 动态创建 div，填充 tbody 并附加到现有的 div

Question

基本上我有一个 <div class='preferences-grid'>已经存在。

点击按钮 preferences-grid-btn-ok我想调用函数 create()这将:

1. 创建一个新的 <div class='preferences-container'>和
2. 填充tbody基于 for .

我的问题是我不能append for 创建的行到 tbody个人<div class='preferences-container'>每次单击按钮时都会创建。

当我使用它时:

jQuery(contents).find(".preferences-table-body").append(row);

没有附加行，当我使用

jQuery(".preferences-table-body").append(row);

第一次不附加任何行，之后新行附加到所有现有的 <div class='preferences-container'>

这里是 jsfiddle链接

Answer 1

您正在创建一个字符串 contents，但 jquery 无法知道它的存在。

这是一个工作 fiddle :http://jsfiddle.net/c524Loam/

function create() {
    var contents = "..."

    var $contents = $(contents);

    for (i = 0; i < 3; i++) {
        var row = $('<tr></tr>').addClass('bar').text('result ' + i);
        $contents.find(".preferences-table-body").append(row);
    }
    return $contents;
}

我使用 contents 创建了一个新的 jquery 对象，然后在 for 循环中操作它。返回后，它会附加到标记中。