javascript - 在 jQuery 中限制附加的 div

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