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()し、配列項目を一度に 1 つずつ削除します。

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/

于 2013-03-12T16:00:42.657 に答える