jQuery Uncaught TypeError со смещением(). Left

Question

Мой код, визуально в любом случае, отлично работает, но я продолжаю получать «Uncaught TypeError: Can not Read свойство« left undefined »в моей консоли. Я понятия не имею, что может вызвать это.

В частности, ошибка появляется на следующем: линии:

var left = $(this).siblings('li.active').offset().left - ($(this).parents('.hoverBar').offset().left + 20);** 

Все функции для связи:

$('.hoverBar li').hover(function(){ 

     var left = $(this).offset().left - ($(this).parents('.hoverBar').offset().left + 20); 
     var width = $(this).width() + "px"; 
     var sictranslate = "translate("+left+"px, 0px)"; 

     $(this).parent('ul').next('div.floatr').css({ 
      "width": width, 
      "-ms-transform" : sictranslate, 
      "-webkit-transform": sictranslate, 
      "-moz-transform": sictranslate, 
      "transform": sictranslate 
     }); 

    }, 

    function(){ 

     var left = $(this).siblings('li.active').offset().left - ($(this).parents('.hoverBar').offset().left + 20);** 
     var width = $(this).siblings('li.active').width() + "px"; 

     var sictranslate = "translate("+left+"px, 0px)"; 

     $(this).parent('ul').next('div.floatr').css({ 
      "width": width, 
      "-ms-transform" : sictranslate, 
      "-webkit-transform": sictranslate, 
      "-moz-transform": sictranslate, 
      "transform": sictranslate 

     }); 

    }).click(function(){ 

     $(this).siblings('li').removeClass('active'); 

     $(this).addClass('active'); 

     return false; 

    }); 

и некоторые соответствующие HTML:

<nav class="head_nav"> 
<div class="hoverBar"> 
<ul id="navbar"> 
      <li class="active"><a href="">About</a> 
    <ul> 
     <li><a href="#">Mission</a></li> 
     <li><a href="#">Board Members</a></li> 
     <li><a href="#">Staff</a></li> 
     <li><a href="#">Members</a></li> 
     <li><a href="#">Task Forces</a></li> 
      </ul> 
    </li> 
<li><a href="">Events</a> 
    <ul> 
     <li><a href="#">Description</a></li> 
     <li><a href="#">Registration with Outlook ICS</a></li> 
     <li><a href="#">Online Payment</a></li> 
     <li><a href="#">Email auto-reminders</a></li> 
     <li><a href="#">Multiple registrants allowed</a></li> 
      </ul> 
    </li> 
</ul> 
<div class="floatr"></div> 
</div> 
</nav> 

Answer 1

Я скопировал свой код в jsFiddle: http://jsfiddle.net/mswieboda/F4fnf/ и в строке 16 вам нужно добавить .parents('.hoverBar').find('li.active') так:

var left = $(this).parents('.hoverBar').find('li.active').offset().left - 
    ($(this).parents('.hoverBar').offset().left + 20); 

Это происходит потому, что парил элемент $(this): .hoverBar > ul > li > ul > li > a не был родственником .hoverBar > ul > li.active вы были пытаясь перейти в DOM.

Это зафиксировало ошибку JS, которую вы получали с помощью .offset() на undefined, так как элемент jQuery не существовал.

Answer 2

Этот когда селектор не имеет элементов, смещение возвращается undefined. Просто обернуть свой код в

var $siblings = $(this).siblings('li.active'); 
if ($siblings.length) { 
    var left = $siblings.offset().left 
      - ($(this).parents('.hoverBar').offset().left + 20); 
    var width = $siblings.width() + "px"; 

    //... 
} 

Таким образом, ваш селектор кэшируется в переменную $siblings и не работает в два раза или больше.