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」まで上下のボタンが正しく機能しますが、 「display:none」に設定されている 2 つの li のギャップのために、停止し、「1234567」を見つけることができません。これを回避する方法はありますか？.next() と .previous() の代わりになるのでしょうか?

4

2 に答える 2

6

nextAll()またはを使用する必要がありますprevAll()。

next()セレクターとprev()一致する場合にのみ、prev/next要素と一致します。nextAll()そして、prevAll()すべてのnext/prev要素で一致するものを検索します。

最初の前/次の要素を選択するには、次のようにしてください。

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 に答える