javascript - Getting Uncaught TypeError: Cannot read property 'left' of null in js - Stack Overflow

admin管理员组

文章数量:1325236

I have this jquery code that goes through the nav bar and the selected link has a box around it. It only works on the middle link, none of the others. Any ideas? Thanks in advance.

navigation arrow starts
var $el, leftPos, newWidth,
    $mainNav = $("#nav");

$mainNav.append("<li id='magic-line'></li>");
var $magicLine = $("#magic-line");

$magicLine
    .width($(".current_page_item").width())
    .css("left", $(".current_page_item a").position().left)
    .data("origLeft", $magicLine.position().left)
    .data("origWidth", $magicLine.width());

//scroll arrow

function update_location(){
    $el = $('#nav').children('li.current');
    leftPos = $el.position().left;
    newWidth = $el.width();
    $('#nav li:nth-child(4) a').addClass('button-style');
    if(window.top.scrollY == 0)
    {
        setTimeout(function(){
        $magicLine.stop().animate({
            left: 8,
            width: 355
        });},1000);
        $('#nav li:nth-child(4) a').removeClass('button-style');

    }
    else
    {
        setTimeout(function(){
        $magicLine.stop().animate({
            left: leftPos,
            width: newWidth
        });},1000);
    }
}

$('#magic-line').css('left', '-15px', 'width','411px');
$(window).scroll(function(){
    update_location();
});

    <div class="navbar-fixed-top navbar" >
    <div class="navbar-inner">
        <div class="container">
            <ul class="nav nav-pills pull-right" id="nav">
                <li class="current_page_item" style="width: 355px;"><a href="#home" class="logo" style="display:block; width: 355px;"><img src="images/logo.jpg" class="current_page_item" width="355" alt="" /></a></li>
                <li><a href="#vision">VISION</a></li>
                <li><a href="#services">SCHOOLS</a></li>
                <li><a href="#apply">REQUEST AN EVALUATION</a></li>
                <li><a href="#how-it-works">HOW IT WORKS</a></li>
                <li><a href="#contact-us">CONTACT US</a></li>
            </ul>
        </div>
    </div>
</div>

Getting the error after leftPos = $el.position().left; under function update_location()

I have this jquery code that goes through the nav bar and the selected link has a box around it. It only works on the middle link, none of the others. Any ideas? Thanks in advance.

navigation arrow starts
var $el, leftPos, newWidth,
    $mainNav = $("#nav");

$mainNav.append("<li id='magic-line'></li>");
var $magicLine = $("#magic-line");

$magicLine
    .width($(".current_page_item").width())
    .css("left", $(".current_page_item a").position().left)
    .data("origLeft", $magicLine.position().left)
    .data("origWidth", $magicLine.width());

//scroll arrow

function update_location(){
    $el = $('#nav').children('li.current');
    leftPos = $el.position().left;
    newWidth = $el.width();
    $('#nav li:nth-child(4) a').addClass('button-style');
    if(window.top.scrollY == 0)
    {
        setTimeout(function(){
        $magicLine.stop().animate({
            left: 8,
            width: 355
        });},1000);
        $('#nav li:nth-child(4) a').removeClass('button-style');

    }
    else
    {
        setTimeout(function(){
        $magicLine.stop().animate({
            left: leftPos,
            width: newWidth
        });},1000);
    }
}

$('#magic-line').css('left', '-15px', 'width','411px');
$(window).scroll(function(){
    update_location();
});

    <div class="navbar-fixed-top navbar" >
    <div class="navbar-inner">
        <div class="container">
            <ul class="nav nav-pills pull-right" id="nav">
                <li class="current_page_item" style="width: 355px;"><a href="#home" class="logo" style="display:block; width: 355px;"><img src="images/logo.jpg" class="current_page_item" width="355" alt="" /></a></li>
                <li><a href="#vision">VISION</a></li>
                <li><a href="#services">SCHOOLS</a></li>
                <li><a href="#apply">REQUEST AN EVALUATION</a></li>
                <li><a href="#how-it-works">HOW IT WORKS</a></li>
                <li><a href="#contact-us">CONTACT US</a></li>
            </ul>
        </div>
    </div>
</div>

Getting the error after leftPos = $el.position().left; under function update_location()

• javascript
• html

Share Improve this question Follow asked Apr 26, 2012 at 17:57 Rodney WilsonRodney Wilson 36911 gold badge44 silver badges1717 bronze badges 3

• 3 The problem is that $el = $('#nav').children('li.current'); contains zero elements. Hence, .position() is null, and your error is observed. Another note: Ever heard about variable declarations? When all var prefixes is omitted, the variables are defined in the global scope. – Rob W Commented Apr 26, 2012 at 18:01
• I understand it's null, but why is it null? – Rodney Wilson Commented Apr 26, 2012 at 18:06
• Because that's defined behaviour in jQuery.fn.position (source): if (!this[0]){return null;} - When there's no element, null is returned. – Rob W Commented Apr 26, 2012 at 18:08

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

I think you might be meaning to use the class current_page_item instead of current on this line:

$el = $('#nav').children('li.current');

$el is an empty jQuery object so el.position() is null and hence, cannot read property left of null.

Thats because:

$el = $('#nav').children('li.current'); 

returns null.

Try:

$el = $('#nav').children('li.current_page_item'); 

本文标签： javascriptGetting Uncaught TypeError Cannot read property 39left39 of null in jsStack Overflow