jQueryでdivを制限する

Question

添付されたdivを4に制限しようとしましたが、私は2つの異なるものを使用すると簡単な答えが見つかりました$.each()$.each()のうち1つだけが制限を取得します。

これは4つのdivを返しますが、2つある場合は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>' 
    ); 
});