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

我正在制作一个选择控件，该控件在"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;
}

的 LI，并且上下按钮在"12"向下到"1234"中正常工作，但是他们在那里停止并且找不到"1234567"，因为设置为"显示"的两个 li 的间隙：没有'。有没有办法解决这个问题？也许是 .next(( 和 .previous(( 的替代品？