JQuery .next() не работает как ожидалось

Question

На моем веб-сайте у меня есть неупорядоченный список, который изначально был незаселен. После загрузки страницы я использую jquery и ajax для вызова php-страницы, загружающей данные из базы данных. Затем он возвращает эти данные в вызов ajax, чтобы он мог создать кучу элементов списка и добавить их в неупорядоченный список.

Каждый из этих элементов списка может быть выбран. Когда они выбраны, я добавляю к ним класс под названием «selected-li», который просто подчеркивает текст. У меня также есть стрелки для перемещения между элементами списка (то есть стрелкой вверх и стрелкой вниз). Я подумал, что следующее будет работать ...

$("#down-arrow").click(function(){ 
    $(".selected-li").next().addClass("selected-li"); 
}); 

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

Как исправить, я сделал следующее:

$("#down-arrow").click(function(){ 
    $(".selected-li").next().next().addClass("selected-li"); 
}); 

Он работает сейчас, но почему это происходит? Почему он думает, что там есть лишний ли?

HTML код:

<div id="up-down-arrows"> 
    <img id="up-arrow" height="35px" width="35px" src="/../images/circle_arrow_up.png"></img><br><br><br> 
    <img id="down-arrow" height="35px" width="35px" src="/../images/circle_arrow_down.png"></img> 
</div> 
<div id="article-list"><ul id="unordered-list"></ul></div> 

код Javascript по возвращении из Ajax вызова:

function(data){ 
    for(var i = 0; i < data.length; i++){ 
     title = data[i]["name"]; 
     $("#unordered-list").append('<li title="' + title + '">' + title + '</li><br>'); 
    } 
} 

Answer 1

Это <br> тег. Функция .next() получает следующий элемент родства, а не следующий элемент <li>. Кроме того, недействительно html иметь <br> между <li> элементами.

Даже если вы нашли причину, по которой вам нужно позвонить .next() дважды, это действительно будет делать то, что вы хотите? Может быть несколько элементов с классом «selected-li», и ваш код затем добавит этот класс к элементам, которые после каждого из них. То есть, если выбраны пункты 3 & 7, элементы 4 & 8 также будут выбраны после нажатия кнопки «вниз». Вот jsfiddle, показывающий это.

Answer 2

LIVE DEMO

.next() или нет .next() ... The <ul> тег не должен держать <br> но список тегов <li>.

Кроме того, я хотел бы предложить следующее: Это также будет перемещать выбранный элемент LI при нажатии кнопок.

var $ul = $('#unordered-list'); 
var liData = ""; // Popoulate string and append only once to UL (see below) 
var $li; // Reference to future created LI 
var liN; // Will hold the number of LI after creation 
var sel = 0; // Selected index 

$.ajax({ 
    dataType: "json", 
    url: 'yourFile.json', 
    success : function(data){ 
    for(var i = 0; i < data.length; i++){ 
     title = data[i].name; 
     liData += '<li title="' + title + '">' + title + '</li>'; // <br>? c'mon.. 
    } 
    $ul.append(liData); // Append only once (performance matters!) 
    $li = $('li', $ul); // Find appended LI - put in collection 
    liN = $li.length;  // How many? 
    $li.eq(sel).addClass('selected-li'); // (add class to first) 
    } 
}); 

$('#up-arrow, #down-arrow').click(function(){ 
    sel = (this.id.match('down') ? ++sel : --sel) % liN ; 
    $li.removeClass('selected-li').eq(sel).addClass('selected-li'); 
});