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/

Answer 2

您可以使用.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');
}

Answer 3

the else if (部分中存在语法错误，您说它不起作用。

它不起作用，因为else if期望一个条件要评估，但你甚至没有关闭那个if条件的括号，也没有打开它的块的括号。

按类编号元素并获取特定div的位置

3 个答案: