jquery - JQuery - 打破 $.each

Question

当我从以下位置检索 10 个项目时，我试图打破以下循环data：

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. 如果您运行以下示例，

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

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

Answer 2

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

Answer 3

你不需要使用计数器。您可以将数组拼接到您需要的最大长度。

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