为什么.next('li:visible')或.prev('li:visible')不能跳过不可见的元素？

Question

我正在制作一个选择控件,显示"li"中的选项列表,并允许用户在li中向上和向下滚动.由于li可以被过滤,有时它们将通过'.hide'呈现为不可见的,给我以下标记:

<input type="text" id="comboBox" />
<ul id="comboBoxData">
    <li style="display:none">1</li>
    <li>12</li>
    <li>123</li>
    <li>1234</li>
    <li style="display:none">12345</li>
    <li style="display:none">123456</li>
    <li>1234567</li>
    <li>12345678</li>
</ul>

我有以下JQuery代码来处理箭头键控件:

$('#comboBox').bind('keypress', function(e) {
    if (e.keyCode >= 38 && e.keyCode <= 41) {
        if ($("#comboBoxData li.selected").length > 0) {
            var current = $("#comboBoxData li.selected");
            if (e.keyCode == 38) {
                $("#comboBoxData li.selected").prev('li:visible').addClass('selected');
            } else if (e.keyCode == 40) {
                $("#comboBoxData li.selected").next('li:visible').addClass('selected');
            }
            current.removeClass('selected');
        } else {
            $("#comboBoxData li:visible:first").addClass('selected');
        }
        $("#comboBox").val($("#comboBoxData li.selected").html());
    }
});

使用以下CSS清楚地标记我选择的元素:

.selected
{
    background-color:Navy;
    color:White;
}

我的问题是这个,在用户按下"向下"按钮时我给出的例子中,正在选择"12"的LI,而"向上"和"向下"按钮正常工作"12"到"1234"但是他们停下来找不到'1234567',因为两个li的间隙被设置为'display:none'.有没有解决的办法？也许是.next()和.previous()的替代品？

Answer 1

你需要使用nextAll()或prevAll()代替.

next()并且prev()只有匹配选择器才匹配prev/next元素.nextAll()并prevAll()搜索所有next/prev元素以进行匹配.

要选择第一个上一个/下一个元素,请尝试;

nextAll('your-selector').first()

要么

nextAll('your-selector:first')