jQuery-突破$ .each

Question

當我從data檢索10個項目時，我試圖打破以下循環：

var counter = 1;

$.ajax({
        url:'http://api.8coupons.com/v1/getchainstorelist?key=' + apiCode,
        dataType:'jsonp',           
        success: function(data){

        //create drop-down box
        var s = $('<select/>',{id:"chainStores"});

        $.each(data, function(key, value) {

            $('<option/>', {text: value.name}).appendTo(s);

            ++counter;

            // After finding 10 stores, break.
            if (counter == 10)
                return false;           
    });

但是，獲得10件物品后似乎並沒有停止。 它似乎正在檢索所有內容。 我最初嘗試使用break但收到語法錯誤。

謝謝您的幫助。

Answer 1

對我來說，代碼中的錯誤是不明顯的，但是您不需要計數器，因為您已經key了函數，該函數表示循環中array的索引，並且您將counter = 1設置counter = 1但是從0開始。 如果運行以下示例 ，

var data = [ {}, {}, {}, {}, {} ];
$.each(data, function(key, value) {
    if (key == 3) {
        console.log('Terminated...');
        return false;           
    }
    console.log(key);
});

結果將是

0

1個

2

終止...

因此，您的代碼應該可以工作，但是問題出在其他地方。 如果您遇到這種情況，可以改用此方法

var s = $('<select/>',{ id:"chainStores" } );
$.each(data, function(key, val) {
    $('<option/>', {value:val.value, text: val.name}).appendTo(s);
    if (key >= 9) return false;           
});
$('body').append(s); // append to the body

另外，請注意options的value屬性，您可能已跳過或忘記了。

Answer 2

您不需要使用計數器。 您可以將陣列拼接為所需的最大長度。

$.ajax({
    url:'http://api.8coupons.com/v1/getchainstorelist?key=' + apiCode,
    dataType:'jsonp',           
    success: function(data) {
        var s = $('<select/>',{id:"chainStores"});
        data = (data.length > 10) ? data.splice(0,10) : data;
        $.each(data, function(key, value) {
            $('<option/>', {text: value.name}).appendTo(s);
        });
});

Answer 3

$.ajax({
    url:'http://api.8coupons.com/v1/getchainstorelist?key=' + apiCode,
    dataType:'jsonp'
}).done(function(data){
    //create drop-down box
    var s = $('<select/>',{id:"chainStores"});
    $(data).slice(0,10).each(function(key, value) {
        $('<option/>', {text: value.name}).appendTo(s);
    });
});