0

我正在尝试想出一种方法，将数据从构建的数组中，在 内$.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可能包含多少个 s，如下所示：

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

然后我得到将li用 ajax 形成 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可能包含的最大 s 是 10，那么如果projects包含 11 个lis，则 10 将排在第一个ul.featured-list，剩下的将在第二行继续，依此类推。

我的想法：

  • $.each()因为uls 不起作用，因为会重复内容
  • 我可以尝试开始将内容附加到 first ul，当它amount停止时，删除已经附加的内容并继续使用 second 的过程ul，但我认为这不是一种优雅的方式

所以你怎么看？你对解决这个问题有什么建议？

更新

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

4

2 回答 2

2

尝试这个

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/

于 2013-06-06T14:12:37.780 回答
1

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

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

对我来说，你已经朝着正确的方向前进了:-)。

您可以slice在对象上使用方法array来切片元素，array同时仍保留原始array.

于 2013-06-06T13:46:48.760 回答