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（）不按預期方式工作

回答

相關問題