Jquery .next（）不按预期方式工作

在我的网站上，我有一个最初未填充的无序列表。在页面加载后，我使用jquery和ajax调用从数据库加载数据的php页面。然后它将该数据返回给ajax调用，以便它可以创建一堆列表项并将它们附加到无序列表中。Jquery .next（）不按预期方式工作

可以选择这些列表项中的每一个。当他们被选中时，我会向他们追加一个名为“selected-li”的类，它只是将文本加下划线。我也有箭头在列表项之间导航（即向上箭头和向下箭头）。我认为以下方法可行...

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

...它的确如此，但并不像预期的那样。我必须点击向下箭头两次才能将课程添加到下一个项目中。出于某种原因，它认为每个显示的内容之间都有一个不可见的列表项。

作为一个解决方法，我做了以下内容：

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

它现在，但为什么会出现这种情况？为什么它认为那里有一个额外的li？

HTML代码：从AJAX调用返回

<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代码：

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

来源

2013-12-19 Flyingcows00

可以共享HTML也 – jammykam

Click事件处理程序不应该在所有的工作，因为你的HTML不包含ID元素'不下来，arrow'带班'选择-li'元素。请张贴HTML的相关部分。 –

可以显示处理ajax响应并创建列表项元素的代码吗？ –

这是<br>标签。 .next()函数获取下一个同级元素，而不是下一个<li>元素。除此之外，在<li>元素之间有<br>是无效的html。

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

来源

2013-12-19 05:30:49

是的，这是br ..我添加的原因是因为我设置显示内联格式的原因。是的，它确实是我想要的。当选择新的列表项目时，我从任何有选择的类别中删除选定的类别。之后，我将它添加到新项目中，以便一次只有一个项目包含此类。感谢您的回应！ – Flyingcows00

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'); 
});

来源

2013-12-19 05:58:23

Jquery .next（）不按预期方式工作

回答

相关问题