從使用jQuery陣列中創建多個列表中的每個

Question

我有元素的數組，一個簡單的例子，讓剛剛用一些數字：

var items = new Array('1','2','3','4','5','6','7','8','9','10'); 

從這個數組，我想創建4無序列表，所以每名單中有3項，像這樣：

<ul> 
    <li>0</li> 
    <li>1</li> 
    <li>2</li> 
</ul> 
<ul> 
    <li>3</li> 
    <li>4</li> 
    <li>5</li> 
</ul> 
... 

這是我走到這一步，但我在這裏卡住了，我不知道如何着手：

var ul = $('<ul>',{'class':'test'}); 
$.each(items,function(index,value){ 
    if(index%3) { 
     //... 
    } 
    var li = $('<li>').append(value); 
    ul.append(li); 
}); 

演示：http://jsfiddle.net/AzmZq/

Answer 1

$.each被過度使用。我只想用一個基本for循環嵌套在一個while循環中，利用Array.shift()刪除陣列項目一次一個：

while (items.length) { 
    var ul = $('<ul>', { 'class': 'test' }); 
    for (var i = 0; i < 3; i++) { 
     if (items.length) { // so we don't append empty list items at the end 
      var li = $('<li>').append(items.shift()); 
      ul.append(li); 
     }; 
    }; 
    $('body').append(ul); 
}; 

http://jsfiddle.net/mblase75/UwDdv/

---

但是，如果你堅持了jQuery的方法，您需要每次追加並重新初始化ulindex%3==0：

var items = new Array('1', '2', '3', '4', '5', '6', '7', '8', '9', '10'); 
var ul; 
$.each(items, function (index, value) { 
    if (index % 3 == 0)  { 
     $('body').append(ul); 
     ul = $('<ul>', {'class': 'test'}); 
    } 
    var li = $('<li>').append(value); 
    ul.append(li); 
}); 
$('body').append(ul); 

http://jsfiddle.net/mblase75/zUyRM/

Answer 2

使用$.map：

var $ul = $("<ul>").append($.map(items, function(s) { return $("<li>").text(s) }); 

一天ES6涉及到所有的瀏覽器，大家會更快樂（現在，我們可以使用Babel）：

let $ul = $("<ul>").append(items.map(item => $("<li>").text(item)));