JQuery - 打破 $.each答案

【问题标题】：JQuery - Break out of $.eachJQuery - 打破 $.each
【发布时间】：2013-11-05 14:42:38
【问题描述】：

当我从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，但收到语法错误。

感谢您的帮助。

【问题讨论】：

是你的计数器递增 - 我认为它应该是 counter++;
@Pete：这不会对特定的代码行产生明显的影响。
啊好吧，那今天学到了一些东西！
你确定没有其他东西在修改counter，或者条件语句正在被评估？ return false; 似乎可以解决问题：jsfiddle.net/yLBd7
我和大卫在一起 - 因为 counter 似乎是全局的，如果其他东西使用称为 counter 的 var，它可能会从 10 开始，这意味着 == 10 永远不会等同

标签： jquery loops break

【解决方案1】：

对我来说，你的代码有什么问题并不明显，但你不需要计数器，因为你的函数中已经有 key，它代表循环中 array 的索引，你正在设置 @ 987654325@ 但它从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

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

【讨论】：

感谢 RCV。这行得通...我的counter 变量一定有问题。这很奇怪，因为counter 在此文件的其他任何地方都没有更改...

【解决方案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);
        });
});

【讨论】：

@JanDvorak 他可能已经在 DOM 中有一个 ID 为 chainStores 的 <select> 标记，并且当他认为每次都应该清除它时，他正在添加越来越多的选项。
@JanDvorak 三思而后行。我不知道。我只想告诉他this isn't the bug you think is the bug。

【解决方案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);
    });
});

【讨论】：

stackoverflow.com/questions/8840257/…