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

我们来看看。对于初学者来说，你的状态很奇怪。您正在将行数与imageLinksSource数组的当前数组大小进行比较。使用类似imageLinksSource.size() > 0的内容。

此外，切片不会修改原始数组，因此您总是会获得相同的元素。

示例：

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;
};

使用jquery按行排列列表

2 个答案: