如何在jQuery的each循环中限制返回结果数量？

问题原因 #

你添加计数器后无结果的核心问题是没有对计数器i进行递增操作，同时可能叠加了其他细节问题（比如模板语法错误、data结构不符合预期）。原本的代码中i始终为0，i === 3的条件永远不会触发，但这不该导致完全无输出，大概率是其他细节问题导致的。

可行解决方案 #

方案1：修复计数器逻辑

给计数器添加递增操作，确保循环到第3条后终止：

let i = 0;
$.ajax({
    method: 'GET',
    url: url
}).done(function (data, status, xhr) {
    $.each(data, function (index, value) {
        if (i === 3) {
            return false; // 终止$.each循环
        }
        $("div").append(`html markup`);
        i++; // 每次循环后递增计数器
    });
});

方案2：直接利用$.each的索引参数（更简洁）

不需要额外计数器，直接通过循环自带的index判断：

$.ajax({
    method: 'GET',
    url: url
}).done(function (data, status, xhr) {
    $.each(data, function (index, value) {
        if (index >= 3) {
            return false; // 索引达到3时终止循环
        }
        $("div").append(`html markup`);
    });
});

方案3：先截取数据再循环（更清晰）

提前从返回的data中截取前3条，再进行循环操作：

$.ajax({
    method: 'GET',
    url: url
}).done(function (data, status, xhr) {
    // 截取数组前3项，若数据不足3条则取全部
    const limitedData = Array.isArray(data) ? data.slice(0, 3) : [];
    $.each(limitedData, function (index, value) {
        $("div").append(`html markup`);
    });
});

额外提示 #

如果修复后仍无输出，建议先在done回调中打印console.log(data)，确认返回的data是否为预期的数组格式，以及html markup模板是否存在语法错误。

内容的提问来源于stack exchange，提问作者jfc