jquery - 未捕获的类型错误 : Cannot read property 'left' of undefined (but works in jsfiddle? )

Question

我刚刚为我的导航制作了一些动画效果。但是，我遇到了 chrome 控制台在第 5 行向我抛出的“未捕获的类型错误:无法读取未定义的属性‘左侧’”的问题:

var left = $('nav').find('.current_page_item').position().left;

如果我手动将选择器输入控制台，那么我会得到预期的 0 返回字符串，但它只是不想发挥作用。

然后我把它带到 jsfiddle 来玩弄它......并且它在那里工作没有问题!在这里找到:http://jsfiddle.net/5wPQa/594/

任何见解都会令人惊叹

编辑:修复在下面的评论中..只是一个简单的文档。准备好两只眼睛总是比一只眼睛好!

Answer 1

尝试在 document.ready 中扭曲您的代码函数，你的 fiddle 可以工作，因为默认情况下 jsfiddle 将你的代码包装在 onLoad 中处理程序(但您可以更改它)。

通过设置 No wrap <in head> 会出现同样的问题: http://jsfiddle.net/G8Jtw/

如果将代码包装在 document.ready 中，它可以正常工作:http://jsfiddle.net/8QeVd/

最终代码:

$(document).ready(function () {
    // insert slider
    $('nav ul').append('<div id="slider"></div>');

    // initially reset
    var left = $('nav').find('.current_page_item').position().left;
    var width = $('nav ul li:first-child a').width();
    $('#slider').css({
        'left': left,
        'width': width
    });

    // sliding
    $('nav ul li a').hover(function () {

        var left = $(this).parent().position().left;
        var width = $(this).width();

        $('#slider').stop().animate({
            'left': left,
                'width': width
        });
    });
});