javascript - 用jquery逐行排列列表

Question

我试图按行组织一个图像列表，每行最多应该有 4 个，我似乎得到了前四个，但它没有得到下一组，而是重复前四个。

var imageLinksSource = $(".images-links .imgOriginals"),
listContainer = $(".imgsList"),
dispType = $(".dispType").val(),
arrCounter = 0;


while (arrCounter < imageLinksSource.size()) {
    arrCounter++;
    var $slices = imageLinksSource.slice(0, 4);
    $("<div class='row-fluid'/>").append($slices.clone()).appendTo(".imgsList");
    $slices.remove();
};

Answer 1

让我们来看看。首先，您的 while 条件很奇怪。您正在将行数与数组的当前数组大小进行比较imageLinksSource。使用类似的东西imageLinksSource.size() > 0。

此外， slice 不会修改原始数组，这就是为什么你总是得到相同的元素。

例子：

while ( imageLinksSource.size() > 0 )
{
    var slices = imageLinksSource.splice(0, 4);
    $("<div class='row-fluid'/>").append($(slices)).appendTo(".imgsList");
}

请注意，我使用了splice而不是slice。虽然没有测试整个代码。

Answer 2

Slice 不会修改数组，因此您需要修改代码以包含一些偏移量（即。imageLinksSource.slice(4*arrCounter, 4*arrCounter + 4);）或从列表中删除前四个元素。

例如：

while (arrCounter < imageLinksSource.size()) {
    var $slices = imageLinksSource.slice(arrCounter, arrCounter + 4);
    $("<div class='row-fluid'/>").append($slices.clone()).appendTo(".imgsList");
    arrCounter += 4;
};