jQuery прокрутите до следующего элемента, ошибка типа uncaught

Question

Привет, я хочу создать слайдер, который будет прокручиваться до следующего элемента.

Я использую <ul> и многочисленные <li> теги, у меня есть все, что стиль, как именно я хочу, чтобы это однако JS возвращает следующую ошибку в консоли:

Uncaught TypeError: Cannot read property 'left' of undefined

JS У меня есть ниже или просмотра jsFiddle:

var currentElement = $("li .listofyears:first"); 

// completely ignoring boundaries 

$("#NavigateBackward").click(function() { 
    currentElement = currentElement.prev(); 
    scrollTo(currentElement); 
}); 

$("#NavigateForward").click(function() { 
    currentElement = currentElement.next(); 
    scrollTo(currentElement);  
}); 

function scrollTo(element) { 
    $(window).scrollLeft(element.position().left); 
} 

мой HTML, как показано ниже:

<div id="years_arrows"> 
      <span class="nav_arrows" ><img src="http://iconify.it/wp-content/icons-large-alt/arrow-left.png" id="NavigateBackward" /></span> 
     <span class="nav_arrows aaa" ><img src="http://upload.wikimedia.org/wikipedia/commons/4/45/Right-facing-Arrow-icon.jpg" id="NavigateForward"/></span> 
     <div id="slider"> 
     <div id="yearslistwrapper"> 
       <ul class="yearslist"> 
        <li class="listofyears"><a href="#">2003</a></li> 
        <li class="listofyears"><a href="#">2004</a></li> 
        <li class="listofyears"><a href="#">2004</a></li> 
        <li class="listofyears"><a href="#">2005</a></li> 
        <li class="listofyears"><a href="#">2006</a></li> 
        <li class="listofyears"><a href="#">2007</a></li> 
        <li class="listofyears"><a href="#">2008</a></li> 
        <li class="listofyears"><a href="#">2009</a></li> 
        <li class="listofyears"><a href="#">2010</a></li> 
        <li class="listofyears"><a href="#">2011</a></li> 
        <li class="listofyears"><a href="#">2012</a></li>      
        <li class="listofyears"><a href="#">2013</a></li> 
       </ul> <!-- END UL yearslist --> 
      </div> <!--End slider--> 

       </div> <!-- End years_arrows div --> 

Answer 1

Ваш селектор неверен и, следовательно, не соответствует никаким элементам. Если объект jQuery, который вы вызываете previous(), пуст (не содержит согласованных элементов), он возвращает undefined.

Ваш селектор:

$("li .listofyears:first"); 

Это ищет первый элемент с классом listofyearsвнутри<li> элемента. Тем не менее, вы хотите первый <li> элемент с этим классом, так что удалить пространство:

$("li.listofyears:first"); 

Есть и другие проблемы, которые необходимо будет решить после этого. Например, если вы нажмете предыдущую кнопку при просмотре первого элемента, не будет обнаружен предыдущий элемент, и вы получите ту же проблему. Вам нужно будет скопировать код (скорее всего ничего не сделайте, если нет предыдущего элемента).

Answer 2

Вы обращаетесь к вашей Ли в неправильном

Line

var currentElement = $("li .listofyears:first"); 

Должно быть

var currentElement = $("li.listofyears:first"); 

ваш код ищет элементы с классом listofyears внутри <li> тега & не <li> тегов с класс listofyears.

Проверить скрипку здесь http://jsfiddle.net/qafjM/

Answer 3

Это работает:

var currentElement = $("li.listofyears").first(); 
// completely ignoring boundaries 

$("#NavigateBackward").click(function() { 
    currentElement = $(currentElement).prev(); 
    scrollTo(currentElement); 
}); 

$("#NavigateForward").click(function() { 
    currentElement = currentElement.next(); 
    scrollTo(currentElement);  
}); 

function scrollTo(element) { 
    $('.yearslist li').show(); 
    $('.yearslist li').not(element).hide(); 
} 

раздвоенный скрипку http://jsfiddle.net/QYmKJ/