javascript - 为什么 .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”之间正常工作' 然而，由于设置为 'display:none' 的两个 li 的间隙，他们在那里停下来找不到 '1234567'。有没有解决的办法？也许是 .next() 和 .previous() 的替代品？

Answer 1

您需要使用 nextAll()或 prevAll()反而。

next() 和 prev() 只会匹配 prev/next 元素，前提是它与选择器匹配。 nextAll() 和 prevAll() 在所有 next/prev 元素中搜索匹配项。

要选择第一个 上一个/下一个元素尝试；

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

或

nextAll('your-selector:first')