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，但它从0开始。如果您运行following example，

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

结果将是

0

1

2

...终止

因此，您的代码应该可以运行，但问题出在其他地方。在您的情况下，您可以尝试使用this

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

另外，请注意value中的options属性，您可能已跳过或忘记了该属性。

Answer 2

您不需要使用计数器。您可以splice将数组调整到所需的最大长度。

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

JQuery - 突破$ .each

3 个答案: