許多元素和具體DIV

的獲得位置我有一個這樣的名單：許多元素和具體DIV

<div class="list"></div> 
<div class="list"></div> 
<div class="list on"></div> 
<div class="list"></div> 
... etc

我得到的總這樣的：

var count = $('.list').length; // 4 in this case

但我想編寫一個函數，選擇下一個div向下箭頭，我不知道如何獲得下一個div，選擇它，並取消選擇當前div。這是我現在有，但它不工作：

var visible = $('.list:visible'); 
var on = $('.list.on:visible'); 
if (e.keyCode == 40) { // down key 
    if(on.length == 0) { 
     visible.first().addClass("on"); // this works 
    } 
    else if(// div placement // < count) { 
     var next = on.next(); // this part doesn't work 
     on.removeClass("on"); // :(
     next.addClass("on"); // :(
    } 
    else { // if its the last div 
     // do nothing 
    } 
}

來源

2014-06-20 user2250471

你可以這樣做：

if (e.keyCode == 40) { // down key 
    if(on.length == 0) { 
     visible.first().addClass("on"); 
    } 
    else if(on.length && on.next("div.list").length > 0) { 
     var next = on.next("div.list"); 
     on.removeClass("on"); 
     next.addClass("on"); 
    } 
    else { // if its the last div 
    // do nothing 
    } 
}

一個快速演示：http://jsfiddle.net/GL7tA/

來源

2014-06-20 14:55:31 tymeJV

這工作，直到你介紹一個隱藏的元素到列表中？ http://jsfiddle.net/GL7tA/1/ – user2250471

@ user2250471--使用'：visible'選擇器，然後 – tymeJV

我試過：可見選擇器。顯然next（）/ prev（）忽略選擇器，所以它不起作用。我最終使用不同的類來隱藏列表項（而不是.hide（）;）和.nextAll（'。list：first'）。addClass（「on」）;讓它充分發揮作用，因爲它仍然是越野車。但是你的回答指向了正確的道路，所以我會給你信用。 :) – user2250471

-2

您在the else if (部分有語法錯誤，你說它不起作用。

它不起作用，因爲else if需要評估條件，但是您甚至沒有關閉該條件的括號，也沒有打開其塊的括號。

來源

2014-06-20 15:00:11

另外，嘗試在JavaScript控制檯中檢查您的JavaScript代碼，以便您可以查看是否有語法錯誤或在網頁中執行它，以查看它是否有效。我會推薦你使用firefox的scratchpad，firebug的控制檯，chrome開發工具控制檯或歌劇的蜻蜓 –

您可以.index()工作，看看哪些項目正在「選擇」：

var $items = $('.list:visible'), 
$selectedItem = $items.filter('.on'), 
selectedIndex = $items.index($selectedItem); 

if (selectedIndex == -1) { 
    $items.eq(0).addClass('on'); 
} else if (selectedIndex + 1 < $items.length) { 
    $selectedItem.next().andSelf().toggleClass('on'); 
}

來源

2014-06-20 15:06:20

許多元素和具體DIV

回答

相關問題