2

我正在制作一个选择控件，它在“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 之间存在间隙。有没有解决的办法？也许可以替代 .next() 和 .previous()？

4

2 回答 2

6

您需要使用nextAll()orprevAll()代替。

next()并且prev()只有匹配选择器时才会匹配上一个/下一个元素。nextAll()并prevAll()在所有下一个/上一个元素中搜索匹配项。

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

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

或者

nextAll('your-selector:first')
于 2012-05-22T09:21:13.167 回答
1

您使用的方法仅适用于下一个项目，如果该项目与选择器不匹配，则无法返回任何项目。您需要使用nextAll或prevAll收集所有可能的元素，以使用您的选择器进行过滤。

看看这个jsfiddle：

http://jsfiddle.net/6WxAZ/2/

于 2012-05-22T09:23:28.677 回答