更新

Question

我正试图想出一种方法，将$.each()内构建的数据中的数据附加到ul.featured-list

<div id="home-page-featured">
    <ul class="featured-list"></ul>
    <ul class="featured-list"></ul>
    <ul class="featured-list"></ul>
</div>

li的内容如下：

<li>
   <a href="http://local.site.com/chocolate-cakes/">
       <img width="186" height="186" src="http://local.site.com/view/img/blank.jpg" />
   </a>
</li>

我计算每个li可能包含的ul个，包含以下内容：

var amount = Math.floor($(document).width() / 186) + 2;

然后我获得了将使用ajax形成li s的内容：

$.ajax({
    url  : '/json/projects/' + (amount * 3),
    type : 'GET',

    success: function(reply, textStatus, jqXHR) {
        var projects = [];
        $.each(reply, function(i, v) {
            if(v['gallery'][0])
            {
                console.log(v['gallery'][0]);
                projects.push(
                    '<li>'
                        +'<a href="/project/'+v['id']+'" title="'+v['name']+'">'
                            +'<img src="/data/images/'+v['gallery'][0].name+'" />'
                        +'</a>'
                    +'</li>'
                );
            }
        });
        console.log(projects);
    }
});

现在唯一的困境是如何在li

中projects内的ul.featured-list内重新分发这些li

假设每个ul.featured-list可能包含的最大projects为10，如果li包含11 ul.featured-list s，则10将转到第一个$.each() 1}}以及剩下的内容将在第二行继续，依此类推。

我的想法：

ul

我可以尝试开始将内容附加到第一个amount，当它到达ul时停止，并删除已经附加的内容并继续使用第二个{{1}}进程，但我认为这样做不会那么优雅

那么，您怎么看？你有什么建议可以解决这个问题吗？

更新

这是我正在使用的当前解决方案，但我觉得效率不高......如何进行优化？ http://jsfiddle.net/nV5RU/9/

Answer 1

试试这个

var arrayToFill = [...];  

$("ul.list").each(function (index) {  //  loop through all <ul> items
    $(this).find("li").each(function (index) { //  loop through all  <li> items inside
        $(this).html(arrayToFill.shift()); // fill & delete one on each turn
    });
});

示例：http://jsfiddle.net/nV5RU/10/

Answer 2

如果您保持代码优化，我认为您的解决方案非常高效且可以接受。我的意思是不是每次在循环中调用$('ul.featured-list')而是将其缓存在某个变量中然后使用该变量。

或者您可以将附加逻辑移动到其他function中，并通过以数组形式传递元素并在function附加loop来调用ul element中的slice那些项目。

对我来说，你已经朝着正确的方向前进： - ）。

您可以使用array对象上的array方法对array中的元素进行切片，同时仍然保留原始{{1}}。

分发javascript数组

我的想法：

更新

2 个答案: