在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個格不是（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>' 
    ); 
});