$ .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 ）），运行以下代码时，此代码没有错误jus不行。 如果我删除代码$.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代码（ url: '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
hello ＆ 11 ＆ 1,111,111
how ＆ 22 ＆ 2,222,222
what ＆ 33 ＆ 3,333,333,
1111 ＆ 1111 ＆ 1111
2222 ＆ 2222 ＆ 2222

2
fine ＆ 44 ＆ 4,444,444
3333 ＆ 3333 ＆ 3333
4444 ＆ 4444 ＆ 4444

3
thanks ＆ 55 ＆ 5,555,555
good ＆ 66 ＆ 6,666,666
5555 ＆ 5555 ＆ 5555
6666 ＆ 6666 ＆ 6666

4

如何解决？我该怎么办？

Answer 1

您可以使用“返回”来中断循环。

所以你可以添加

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

就在您的第一个$。顶部

Answer 2

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 3

我会建议几件事：

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

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

要知道当您在hotel_id，resident_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()
});