自动递增 JS 对象数组

Question

我有点难过，可能忽略了什么。基本上我有一个 JS 对象数组：

var defaults = {
    pointers : {
        pointer1 : {
            top : '0px',
            left : '75px',
        },
        pointer2 : {
            top : '310px',
            left : '170px',
        },
        pointer3 : {
            top : '50px',
            left : '80px'
        },
        pointer4 : {
            top : '0px',
            left : '130px',
        },
        pointer5 : {
            top : '310px',
            left : '205px',
        },
        pointer6 : {
            top : '50px',
            left : '90px'
        }
    }
};

如果我用 class pointer-circle 手动调用它们添加到 <li> 它工作正常:

$('.pointer-circle:eq(1)').css({
    top : defaults.pointers.pointer1.top,
    left : defaults.pointers.pointer1.left
});

但不是手动输出每个指针，而是希望它们通过 for 循环：

var i = 1;
for (i in defaults.pointers) {
    $('.pointer-circle:eq(' + i + ')').css({
        top : defaults.pointers.pointer[i].top,
        left : defaults.pointers.pointer[i].left
    });
}

这不起作用。在控制台日志中，我收到此错误：

Uncaught TypeError: Cannot read property 'pointer1' of undefined

非常感谢任何帮助。

Answer 1

i直接引用对象。您只需要 i.top。您将标准 for 循环与 for-in 循环混为一谈。当然，这意味着$('.pointer-circle:eq(' + i + ')')并不是你想的那样。

Answer 2

这就是您想要的：

var counter = 0;
for (i in defaults.pointers) {
    $('.pointer-circle:eq(' + counter + ')').css({
        top : defaults.pointers[i].top,
        left : defaults.pointers[i].left
    });
    counter++;
}

（另见 this Fiddle）

自动递增 JS 对象数组

Auto Incrementing JS Object Array

javascript

arrays

jquery

javascript-objects