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方法，则需要每次ul追加并重新初始化index%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)));

使用jQuery Each从数组创建多个列表

2 个答案: