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