$.each()不能正确地遍历数组

Question

我在使用jQuery迭代关联数组时遇到了问题。在HTML页面中有四个span元素...我使用json获取这些元素的text()值，以构建一个维度数组。

var export_pkg = { 
           height : $('#cubeiq_hght').text(),
           length : $('#cubeiq_lnth').text(), 
            depth : $('#cubeiq_wdth').text(), 
           weight : $('#cubeiq_wght').text() 
};

$.each(export_pkg, function(key,value){

    alert(key + ' ' + value);

});

由于某种我无法理解的原因，export_pkg的长度始终是数组中length的文本值。Firefox和IE的开发者工具都显示export_pkg是一个有4个项且值正确的数组。但当我到达$.each块时，它会忽略对象并只使用第二个条目作为对象的长度。

例如：如果数组有{length: 10}，那么警报框将出现10次，无论其他值是什么。我无法想象为什么它不像我预期的那样运行4次。

这里是一个jslint链接 http://jsfiddle.net/fFDfU/。

- DirtyBirdNJ

Answer 1

首先，你使用的不是一个数组，而是一个对象。但你可以像想要的那样使用each来迭代对象属性。

length属性被each用来查看需要迭代的项目数量。由于你的对象内有一个length，它会混淆each。

我建议你更改该属性名称：http://jsfiddle.net/ErickPetru/fFDfU/1/

- Erick Petrucelli

---

没错，说得对...我在覆盖一个内置属性。现在完美运行！ - DirtyBirdNJ

Answer 2

您手头的不是对象数组，而是带有属性的对象。定义数组的方式如下：

var array = [ 
{ 
    height : $('#cubeiq_hght').text(),
    length : $('#cubeiq_lnth').text(), 
    depth : $('#cubeiq_wdth').text(), 
    weight : $('#cubeiq_wght').text() 
}, 
{
    height : $('#cubeiq_hght').text(),
    length : $('#cubeiq_lnth').text(), 
    depth : $('#cubeiq_wdth').text(), 
    weight : $('#cubeiq_wght').text() 
}, 
{
    ...
}
];

那么你可以循环：

$.each(array, function() {
    alert(this.height + ' ' + this.length + ...);
});

如果你想实现你想要的目标（遍历对象的属性），可以这样做：

for (var propertyName in export_pkg) {
   alert(propertyName + ' ' + export_pkg[propertyName]);   
}

- Darin Dimitrov

---

each 可以用于循环对象属性，就像 OP 想要的那样。 - user736619

Answer 3

你的对象具有属性length，$.each使用它来迭代数组。由于你定义了它，你破坏了该方法的行为。尝试将名称更改为其他名称，例如_length

var export_pkg = { height : '10', _length : '3', depth : '30',  weight : '40' };

- Jeff

---

啊哈！现在完全明白了！我正在覆盖其中一个内置属性！非常感谢你！ - DirtyBirdNJ

好的，但只是我在3分钟前所说的，并且带给您一个可用的Fiddle... - Erick Petrucelli