javascript - 按类对元素进行编号并获取特定 div 的位置

Question

我有一个这样的列表:

<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
    }
}

Answer 1

你可以这样做:

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/