javascript - 使用 javascript for 循环动态加载多个 - 尚未加载任何内容

Question

我正在尝试加载 X 数量的 <li>进入<ul>通过 for在 jquery 函数中循环，虽然我认为我的语法是正确的，但我没有加载任何内容。 (加载单个 <li> 没有问题，但使用我尝试过的方法加载多个则没有问题)

最初，我尝试将变量传递到循环中以确定增量量:var peekListAmount = 5;

这不起作用，所以我选择了沼泽标准循环增量器。这也不起作用，所以，在这里搜索并接近之后，我整理了一个 fiddle ，看看是否有人可以指出我做错了什么:http://jsfiddle.net/janowicz/hEjxP/8/

最终我想使用 Knockout.js 动态输入一个数字以传递给循环量变量，但第一件事是第一。

提前非常感谢。

Answer 1

当你这样做时:

var peekListItem = $('<li>...</li>');

您正在创建 <li> 的单个实例节点，封装在 jQuery 对象中。

将已经存在的节点附加到 DOM 只会将其从 DOM 树中的当前位置删除，并将其移动到新位置。

您需要在循环内部而不是外部创建节点，否则您每次只是重新附加相同节点，而不是该节点的副本.

事实上，假设您没有操作该节点，您可以将所需的 HTML 直接放入 .append() 中。调用而不将其包装在 $(...) 中完全:

$(function() {
    var peekList = $('<ul class="peekaboo-list">').appendTo('div.peekaboo-wrap');

    function addLiAnchorNodes(nodeAmount) {
        var html = '<li><a href="#" class="peekaboo-link"></a>' +
                   '<p class="peekaboo-text"></p></li>';

        for (var i = 0; i < nodeAmount; ++i) {
            peekList.append(html);
        }
    }
    addLiAnchorNodes(5);
});

参见http://jsfiddle.net/alnitak/8xvbY/