美元.jQuery中的每个问题

$.each and problem with it in jQuery

本文关键字：问题 jQuery 美元      更新时间：2023-09-26

我想通过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项有4项，data[0].residence_u项只有3项。所以当外循环到达index === 3时，没有data[0].residence_u[index])

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

这是总结从我的js代码在ajax调用(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

如何修复它和我该做什么?

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

你可以使用'return'来跳出循环。

所以你可以添加

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

在第一个$。each

我有几点建议:

  1. 如果您使用相同的数据格式，那么您应该编写防御性代码，以防止三个并行数组中的数组长度不同。你可以只在三个数组中最短的数组上进行迭代，这样你的索引就不会越界。
  2. 你可以修复你的数据结构，这样所有的数据一起去一个给定的迭代是在一个对象，因此你永远不会有不同数量的不同属性。你用hotel_id、units、price等创建一个对象…而不是为每一个单独的数组。保留对象的所有属性，而不是必须与对象关联的属性数组。

至于你当前的代码，你的代码逻辑是有缺陷的。您有一个外部.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()
});
相关文章：