jquery uncatch 类型错误：无法读取未定义的属性'left'

Question

最近，我根据nettuts教程制作了一个lavalamp插件，它在我的其他网站上运行得很好。我想重用它与我的其他网站，但我得到这个错误:

Uncaught TypeError: Cannot read property 'left' of undefined

我是jQuery的初学者，我真的不知道如何修复它。

代码:

(function($){
    $.fn.lavylamp = function(options)
    {
        options = $.extend({
            overlay: 20,
            speend: 300,
            reset: 1500,
            color: '#78C2FF',
            easing: 'easeOutExpo',
        }, options);
        return this.each(function(){
            var nav = $(this),
            currentPageItem = $('#active', nav),
            cursor,
            reset;
            $('<li id="blob"></li>').css({
                width: currentPageItem.outerWidth(),
                left: currentPageItem.position().left,
                top: currentPageItem.position().top,
                backgroundColor: options.color,
            }).appendTo('#nav');
            blob = $('#blob', nav);
            $('li', nav).hover(function(){
                blob.animate(
                {
                    left: $(this).position().left,
                    width: $(this).width()
                },
                {
                    duration: options.speed,
                    easing: options.spped,
                    queue: false
                }
                );
            }, function(){
                clearTimeout(reset);
                blob.stop().animate({
                    left: $(this).position().left,
                    width: $(this).width()
                }, options.speed);
                reset = setTimeout(function(){
                    blob.stop().animate({
                        width: $(this).outerWidth(),
                        left: $(this).position().left,
                    }, options.speed);
                }, options.reset);
            });
        });
    }
})(jQuery);

这个错误适用于这个部分:

$('<li id="blob"></li>').css({
                width: currentPageItem.outerWidth(),
                left: currentPageItem.position().left,
                top: currentPageItem.position().top,
                backgroundColor: options.color,
            }).appendTo('#nav');

有谁能给我点提示吗?

编辑

HTML

<ul id="nav" class="unstyled inline">
            <li><a href="">Start up Business</a></li>
            <li><a href="industries.php=2">Entrepreneurial & Familit Owned Business</a></li>
            <li><a href="">Hight Net Worth Individuals</a></li>
            <li><a href="careers.php=1">Professionlas</a></li>
            <li><a href="industries.php=8">Real Estate Professionlas</a></li>
            <li><a href="industries.php=7">Not For Profit</a></li>
        </ul>

Answer 1

只是猜测，但我怀疑:

 currentPageItem = $('#active', nav),

应:

 currentPageItem = $('.active', nav),

#为按ID选择，.为按类别选择。由于ID是唯一的，在每个元素中搜索不同的active ID是没有意义的，这就是类的用途。

Answer 2

可能，您想选择一个元素，而不是两个?

currentPageItem = $('#active', nav)

选择所有id="active"且nav ="active"的