$.each 及其在 jQuery 中的问题

Question

我想通过 jQuery.each 和数据 hotel_id 从数组中追加一些，每个 hotel_id 的编号为 4，并且此循环 $.each (data[0].hotel_id,... }); 在 self 内部运行 4 次内容，以防数据库行 residence_u 和 residence_p 3 次（每次它们有 3 个，而不是 4 个（如 hotel_id）），当运行以下代码时，此代码没有错误，只是不起作用。如果我删除代码 $.each(info_ru.units,... }); 和 $.each(info_rp.start_date,... }); 它有效：

（有四个 data[0].hotel_id 项，但只有三个 data[0].residence_u 项。因此，当外循环到达 index === 时3，没有data[0].residence_u[index]）

查看我的完整js代码：http: //jsfiddle.net/6sGBd/

这是我在 ajax 调用中的 js 代码的摘要(url: 'get_gr',)：

$.each(data[0].hotel_id, function (index, value) {
    var $li = $('<li><input name="hotel_id[]" value="' + value.hotel_id + '" style="display:none;"></li>');
    var $tooltip = $('<div class="tooltip"></div>').appendTo($li);
    $li.appendTo('#residence_name');

    var info_ru = data[0].residence_u[index];
    $.each(info_ru.units, function (index, value) {
        $tooltip.append(value + ' & ' + info_ru.extra[index] + ' & ' + info_ru.price[index] + '<br>');
    });

    var info_rp = data[0].residence_p[index];
    $.each(info_rp.start_date, function (index, value) {
        $tooltip.append(value + ' & ' + info_rp.end_date[index] + ' & ' + info_rp.price_change[index] + '<br>');
    });
    tool_tip()
});

这是输出 php 代码(网址： 'get_gr',):

[{
    "guide": null,
    "hotel_id": [{
        "hotel_id": ["1"]
    }, {
        "hotel_id": ["2"]
    }, {
        "hotel_id": ["3"]
    }, {
        "hotel_id": ["4"]
    }],
    "residence_u": [{
        "units": ["hello", "how", "what"],
        "extra": ["11", "22", "33"],
        "price": ["1,111,111", "2,222,222", "3,333,333"]
    }, {
        "units": ["fine"],
        "extra": ["44"],
        "price": ["4,444,444"]
    }, {
        "units": ["thanks", "good"],
        "extra": ["55", "66"],
        "price": ["5,555,555", "6,666,666"]
    }],
    "residence_p": [{
        "start_date": ["1111", "2222"],
        "end_date": ["1111", "2222"],
        "price_change": ["1111", "2222"]
    }, {
        "start_date": ["3333", "444"],
        "end_date": ["3333", "4444"],
        "price_change": ["3333", "4444"]
    }, {
        "start_date": ["5555", "6666"],
        "end_date": ["5555", "6666"],
        "price_change": ["5555", "6666"]
    }]
}]

输出js代码是这样的:

1
你好 & 11 & 1,111,111
如何 & 22 & 2,222,222
什么 & 33 & 3,333,333，
1111 & 1111 & 1111
2222 & 2222 & 2222

2
精细 & 44 & 4,444,444
3333 & 3333 & 3333
4444 & 4444 & 4444

3
谢谢 & 55 & 5,555,555
好 & 66 & 6,666,666
5555 & 5555 & 5555
6666 & 6666 & 6666

<代码>4

如何修复它，我该怎么办？

Answer 1

Residence_u 数组的长度只有 3，因此当 index == 4 并分配 var info_ru = data[0].residence_u[index]; 时，然后访问未定义的 info_ru 元素是一个错误并停止执行。

您可以通过检查 info_ru 和 info_rp 是否是包含您要查找的元素的对象来修复它。

$.each(data[0].hotel_id, function (index, value) {
    var $li = $('<li><input name="hotel_id[]" value="' + value.hotel_id + '" style="display:none;"></li>');
    var $tooltip = $('<div class="tooltip"></div>').appendTo($li);
    $li.appendTo('#residence_name');

    var info_ru = data[0].residence_u[index];
    if (info_ru && typeof info_ru === 'object' && info_ru.hasOwnProperty('units')) {
        $.each(info_ru.units, function (index, value) {
          $tooltip.append(value + ' & ' + info_ru.extra[index] + ' & ' + info_ru.price[index] + '<br>');
        });
    }

    var info_rp = data[0].residence_p[index];
    if (info_rp && typeof info_rp === 'object' && info_rp.hasOwnProperty('start_date')) {
        $.each(info_rp.start_date, function (index, value) {
            $tooltip.append(value + ' & ' + info_rp.end_date[index] + ' & ' + info_rp.price_change[index] + '<br>');
        });
    }
    tool_tip()
});

Answer 2

您可以使用“return”来跳出循环。

所以你可以

if(index === 3){
    return false;
}

在第一个 $.each 的顶部添加

Answer 3

我建议几件事：

1. 如果您使用相同的数据格式，那么您应该进行防御性编码，以防止三个并行数组中的数组长度不同。您可以编写代码以仅迭代三个数组中最短的一个，这样您的索引就永远不会超出范围。
2. 您可以修复数据结构，以便给定迭代中组合在一起的所有数据都在一个对象中，因此您永远不会拥有不同数量的不同属性。您可以使用 hotel_id、单位、价格等创建一个对象，而不是为每个对象创建单独的数组。将所有属性保留在对象中，而不是随后必须与对象关联的属性数组。

至于您当前的代码，您的代码逻辑有缺陷。您有一个外部 .each() 循环，它迭代具有 4 个项目的 hotel_id 数组，但您使用该循环中的索引来访问其他两个不具有相同编号的数据结构的项目。要么您的数据错误，要么您的代码逻辑有缺陷，在这两种情况下，您的代码都不是防御性编写的，以防止数组长度不匹配。

当 hotel_id、residence_u 和 Residence_p 数组中有不同数量的项目时，要知道您真正想要推荐什么，我们必须更多地了解您真正想要做什么。

您可以通过更改外循环以仅迭代与其他数组相同的次数来进行防御性编码。因此，如果最短数组的长度为 3，那么这就是您迭代外循环的次数，因此索引永远不会超出范围：

var minLen = Math.min(Math.min(data[0].hotel_id.length, data[0].residence_u.length), data[0].residence_u.length);
for (var index = 0; index < minLen; index++) {
    var value = data[0].hotel_id[index];
    var $li = $('<li><input name="hotel_id[]" value="' + value.hotel_id + '" style="display:none;"></li>');
    var $tooltip = $('<div class="tooltip"></div>').appendTo($li);
    $li.appendTo('#residence_name');

    var info_ru = data[0].residence_u[index];
    $.each(info_ru.units, function (index, value) {
        $tooltip.append(value + ' & ' + info_ru.extra[index] + ' & ' + info_ru.price[index] + '<br>');
    });

    var info_rp = data[0].residence_p[index];
    $.each(info_rp.start_date, function (index, value) {
        $tooltip.append(value + ' & ' + info_rp.end_date[index] + ' & ' + info_rp.price_change[index] + '<br>');
    });
    tool_tip()
});