0

我正在尝试通过 jquery 函数中的循环将 X 数量的<li>'s 加载到 a中，虽然我认为我已经掌握了正确的语法，但我没有得到任何加载。（加载单个没有问题，但使用我尝试过的方法加载多个没有问题）<ul>for<li>

最初我试图将一个变量传递到循环中以确定增量的数量：var peekListAmount = 5;

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

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

提前谢谢了。

4

4 回答 4

3

当你这样做时：

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

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

将已经存在的节点附加到 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/

于 2013-04-29T12:11:16.157 回答
1

这是你更新的代码

$(function(){
    var peekList = $('<ul class="peekaboo-list"></ul>');
    var peekListItem = '<li><a href="#" class="peekaboo-link"></a><p class="peekaboo-text"></p></li>';
    //var peekListAmount = 5;   
    var tmp = '';
    var addLiAnchorNodes = function (nodeAmount){
        //var nodeAmount = peekListAmount;
        for (var i = 0; i < 10; i++){
            tmp += peekListItem;
        }
        peekList.append(tmp);
         $('div.peekaboo-wrap').append(peekList); // This bit works fine
    }
    addLiAnchorNodes();
});
于 2013-04-29T12:16:30.773 回答
0

这应该有效。不要在每个循环中附加列表项，而是在最后只附加一次列表。

$(function(){
    var peekList = $('<ul class="peekaboo-list"></ul>');    
    peekList.appendTo('div.peekaboo-wrap');    
    var addLiAnchorNodes = function (nodeAmount){        
        var list = "";
        for (var i = 0; i < 10; i++){
            list += '<li><a href="#" class="peekaboo-link">Sample</a><p class="peekaboo-text"></p></li>';            
        }
        peekList.append(list);
    }
    addLiAnchorNodes();
});

这是更新的小提琴

于 2013-04-29T12:19:07.270 回答
0

尝试这个：

$(function(){
    var peekList = $('<ul class="peekaboo-list"></ul>');


    $(peekList).appendTo('div.peekaboo-wrap'); // This bit works fine

    var addLiAnchorNodes = function (nodeAmount){
        //var nodeAmount = peekListAmount;
        for (var i = 0; i < 10; i++){
            var peekListItem = $('<li><a href="#" class="peekaboo-link"></a><p class="peekaboo-text"></p></li>');
            peekListItem.appendTo(peekList);
        }

    }
    addLiAnchorNodes();
});
于 2013-04-29T12:25:09.990 回答