1

我有一个元素数组，举个简单的例子，让我们只使用一些数字：

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/

4

2 回答 2

3

$.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/

ul但是，如果您坚持使用 jQuery 方法，则需要每次都附加并重新初始化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/

于 2013-03-12T16:00:42.657 回答
1

使用$.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)));
于 2015-12-17T12:42:25.877 回答