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 code：

<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>元素之间<li>之外，html无效。

即使您找到了必须两次致电.next()的原因，这真的会按照您的意愿行事吗？ “selected-li”类可能有多个项目，然后您的代码会将该类添加到每个项目之后的项目中。也就是说，如果项目3＆amp;选择7，第4项和第4项。单击向下按钮后也将选择8。这是显示此内容的jsfiddle。

Answer 2

<强> LIVE DEMO

.next()或没有.next() ... <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');
});

Jquery .next（）没有按预期工作

2 个答案: