Question

尝试将我附加的div限制为4，我找到了一个简单的答案，但是当我在两个$.each()中使用它时，只有两个$.each()中的一个获得了限制。

说我有 - 这将返回4个div但是如果我有两个这样的1个将有4个div而其他将没有附加任何项目。

var maxAppend = 0;
$.each(data.drinks.Upsell, function (index, value) {
    if (maxAppend >= 4) return;
    maxAppend++;
    $('#rcmd_snacks_list').append(
        '<div class="col-md-3 col-sm-6"> <div class="thumbnail">' +
        '<div class="image">' + '<img src="./assets/imgs/' + value.image + '" alt="' + value.name + '" class="img-responsive"> </div>' +
        '<div class="caption">' +
        '<p class="item-name">' + value.name + '</p>' +
        '<p class="price">£' + parseFloat(value.price).toFixed(2) + '</p>' +
        '<div class="row"> <button data-key="' + value.name + '" class="btn btn-success btn-sm addToCart" onClick="openNutritionInfo()"> <i class="fa fa-info fa-1x"></i> Nutrition Info</button> </div>' +
        '</div>' +
        '</div> </div>'
    );
});

与上述相同 -

$.each(data.snacks.Upsell, function (index, value) {
    if (maxAppend >= 4) return;
    maxAppend++;
    $('#rcmd_drinks_list').append(
        '<div class="col-md-3 col-sm-6"> <div class="thumbnail">' +
        '<div class="image">' + '<img src="./assets/imgs/' + value.image + '" alt="' + value.name + '" class="img-responsive"> </div>' +
        '<div class="caption">' +
        '<p class="item-name">' + value.name + '</p>' +
        '<p class="price">£' + parseFloat(value.price).toFixed(2) + '</p>' +
        '<div class="row"> <button data-key="' + value.name + '" class="btn btn-success btn-sm addToCart" onClick="openNutritionInfo()"> <i class="fa fa-info fa-1x"></i> Nutrition Info</button> </div>' +
        '</div>' +
        '</div> </div>'
    );
});

我预计他们会追加4个div而不是4个没有。

Answer 1

正如我在评论中提到的，将maxAppend设置为实际最大值会更好。这样，就不需要重置或修改maxAppend值。

var maxAppend = 4; // or const
$.each(data.drinks.Upsell, function (index, value) {
    if (index >= maxAppend) return; // correction: NOT +1
    $('#rcmd_drinks_list').append(
        '<div class="col-md-3 col-sm-6"> <div class="thumbnail">' +
        '<div class="image">' + '<img src="./assets/imgs/' + value.image + '" alt="' + value.name + '" class="img-responsive"> </div>' +
        '<div class="caption">' +
        '<p class="item-name">' + value.name + '</p>' +
        '<p class="price">£' + parseFloat(value.price).toFixed(2) + '</p>' +
        '<div class="row"> <button data-key="' + value.name + '" class="btn btn-success btn-sm addToCart" onClick="openNutritionInfo()"> <i class="fa fa-info fa-1x"></i> Nutrition Info</button> </div>' +
        '</div>' +
        '</div> </div>'
    );
});

Answer 2

您只需使用$.each回调方法提供的索引：

$.each(data.snacks.Upsell, function (index, value) {
    if (index >= 4 ) return;

    $('#rcmd_drinks_list').append(
        '<div class="col-md-3 col-sm-6">  .... </div>'
    );
});

如果您希望将来添加其他元素，您可以更好地将计数器与容器中现有的div同步：

var childrenDivs= $('#rcmd_snacks_list > div'); // get direct children div 
var maxAppend = 4;
var remainingSlots = maxAppend - childrenDivs.size();

$.each(data.snacks.Upsell, function (index, value) {
    if (remainingSlots <= 0) return;
    remainingSlots--;
    $('#rcmd_drinks_list').append(
        '<div class="col-md-3 col-sm-6">  .... </div>'
    );
});

在jQuery中限制附加的div

2 个答案: