分發JavaScript數組

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>

我用以下公式計算每個ul可能包含的li ：

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

然后，我得到了將與ajax形成li的內容：

$.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);
    }
});

現在剩下的唯一難題是如何在我的所有ul.featured-list重新分配projects內部的li

比方說，最大的li s表示每個ul.featured-list可能包含是10，那么如果projects包含11 li秒，10會先ul.featured-list和還剩下些什么會繼續在第二行，依此上。

我的想法：

• ul的$.each()無效，因為它將重復內容
• 我可以嘗試開始將內容追加到第一個ul ，當內容達到停止amount時，刪除已添加的內容，然后繼續執行第二個ul的過程，但是我認為這不是這么好的方法正在做

所以你怎么看？ 您對解決這個問題有什么建議？

更新資料

這是我目前正在使用的解決方案，但我不覺得這樣有效率...如何對其進行優化？ 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並通過以數組形式傳遞元素並將ul element附加到ul element來loop調用該function 。

對我來說，您已經朝着正確的方向發展：-)。

您可以使用slice上的方法array對象從切片元素array ，同時仍保留原有的array 。