许多元素和具体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

回答

相关问题