Javascript每隔n,创建新行

Question

我有一个产品页面,我希望每行显示3个项目,然后如果它有更多,创建一个新行并显示更多.因此每行3个cols,行数不受限制.下面是我的代码,其中包含我的循环,我假设代码需要进入.

$(data).find('products').each(function() {

            itemName = $(this).find('itemName').text();
            itemDesc = $(this).find('itemDesc').text();
            itemID = $(this).find('id').text();

                items +='<div class="row-fluid">\
                <div class="span3">Col 1</div>\
                <div class="span3">Col 2</div>\
                <div class="span3">Col 3</div>\
                </div>';

            count++;

        });

这是我需要做的地方,但我有点坚持如何处理这个问题.如果计数可以被3分割,我认为它将需要创建一个新行.

感谢您提供的任何帮助或输入.

Answer 1

首先,不需要自己处理count变量,该.each()函数已经提供了一个索引元素(作为可选参数).

使用modulus操作符,您可以将剩余部分除以index3.然后您可以知道何时需要打印行的开头和结尾.

$(data).find('products').each(function(index) {

    itemName = $(this).find('itemName').text();
    itemDesc = $(this).find('itemDesc').text();
    itemID = $(this).find('id').text();

        if ((index % 3) == 0) items += '<div class="row-fluid">';

        items += '<div class="span3">Col 1</div>';

        if ((index % 3) == 2) items += '</div>';
});

if (items.substr(-12) != '</div></div>') items += '</div>';