Begrenzung angehängt div in jQuery

Question

Versuchen Sie, meine angehängte div auf 4 zu begrenzen, fand ich eine einfache Antwort, aber wenn ich es in zwei verschiedenen $.each() nur 1 der beiden $.each() verwendet, wird das Limit.

Sag ich habe - das wird 4 divs zurückgeben, aber wenn ich zwei von diesen habe, habe ich 4 divs und andere werden keine Elemente angehängt haben.

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

Wie oben -

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

erwartete ich sie 4TE anhängen nicht (4 und keine).

Answer 1

Wie ich in den Kommentaren erwähnt habe, ist es besser, maxAppend als den tatsächlichen Maximalwert zu setzen. Auf diese Weise muss der maxAppend-Wert nicht zurückgesetzt oder geändert werden.

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

Sie können einfach den Index von $.each Callback-Methode zur Verfügung gestellt verwenden:

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

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

Wenn Sie wollen, andere Elemente in Zukunft anzuhängen, sollten Sie besser Ihre Zähler mit bereits bestehenden div in Ihrem Container synchronisieren würde:

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