javascript - Jquery .next() 没有按预期工作

Question

在我的网站上，我有一个最初未填充的无序列表。页面加载后，我使用 jquery 和 ajax 调用从数据库加载数据的 php 页面。然后它将该数据返回给 ajax 调用，以便它可以创建一堆列表项并将它们附加到无序列表。

可以选择这些列表项中的每一个。当它们被选中时，我会为它们附加一个名为“selected-li”的类，它只是在文本下划线。我还有在列表项之间导航的箭头(即向上箭头和向下箭头)。我认为以下会起作用...

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

...确实如此，只是不符合预期。我必须单击向下箭头两次才能将类(class)添加到下一个项目。出于某种原因，它认为在每个显示的列表项之间有一个不可见的列表项。

作为修复，我做了以下操作:

$("#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>

从 ajax 调用返回的 Javascript 代码:

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>元素。此外，<br> 不是有效的 html在 <li> 之间元素。

即使您找到必须调用 .next() 的原因两次，这真的会如你所愿吗？可能有多个项目具有“selected-li”类，然后您的代码会将该类添加到每个项目之后的项目中。也就是说，如果项目 3 和 7 被选中，则在单击向下按钮后项目 4 和 8 也会被选中。这是一个 jsfiddle显示这个。