次の表示可能なリストタグを見つける方法についてはjquery

下矢印キーイベントから次に表示されるリストタグを見つけるのに役立つ人はいますか？

HTML：

                        <ul class="langCountryListLeftPanel" data-bind="foreach: myLangListViewModel.CommonList">
                            <li style="display: none;">
                                <span class="chkboxStyle01 chkboxStyle01Normal columnLeft">⬛</span>
                                <a tabindex="20" class="columnLeft" data-bind="html:$data,  click: myLangListViewModel.showCountryList">Pashto</a>
                            </li>

                            <li>
                                <span class="chkboxStyle01 chkboxStyle01Normal columnLeft">⬛</span>
                                <a tabindex="20" class="columnLeft" data-bind="html:$data,  click: myLangListViewModel.showCountryList">Dari</a>
                            </li>

                            <li style="display: none;">
                                <span class="chkboxStyle01 chkboxStyle01Normal columnLeft">&nbsp;</span>
                                <a tabindex="20" class="columnLeft" data-bind="html:$data,  click: myLangListViewModel.showCountryList">Albanian</a>
                            </li>

                            <li>
                                <span class="chkboxStyle01 chkboxStyle01Normal columnLeft">⬛</span>
                                <a tabindex="20" class="columnLeft" data-bind="html:$data,  click: myLangListViewModel.showCountryList">Dutch</a>
                            </li>

                            <li style="display: none;">
                                <span class="chkboxStyle01 chkboxStyle01Normal columnLeft">&nbsp;</span>
                                <a tabindex="20" class="columnLeft" data-bind="html:$data,  click: myLangListViewModel.showCountryList">French</a>
                            </li>

                            <li style="display: none;">
                                <span class="chkboxStyle01 chkboxStyle01Normal columnLeft">&nbsp;</span>
                                <a tabindex="20" class="columnLeft" data-bind="html:$data,  click: myLangListViewModel.showCountryList">German</a>
                            </li>

                            <li>
                                <span class="chkboxStyle01 chkboxStyle01Normal columnLeft">&nbsp;</span>
                                <a tabindex="20" class="columnLeft" data-bind="html:$data,  click: myLangListViewModel.showCountryList">English</a>
                            </li>

                            <li>
                                <span class="chkboxStyle01 chkboxStyle01Normal columnLeft">⬛</span>
                                <a tabindex="20" class="columnLeft" data-bind="html:$data,  click: myLangListViewModel.showCountryList">Danish</a>
                            </li>
</ul>

JS：

    $('.langCountryListLeftPanel li a').keydown(function (e) {
                    // For keyboard shortcuts for "Down arrow" pressing 
                    if (e.keyCode == 40) {
                        alert($(this).closest("li").next("li").is(':visible').text());
                        $(this).closest("li").next("li").find("a").focus();
                        return false;
                    }
   });

これは、上記のhtml構造から、フォーカスがリストタグのいずれかにある場合、下矢印を押すと、非表示のリストタグではなく、次の表示リストタグのみにフォーカスする必要があります。次の表示リストタグを見つける方法、またはjqueryを使用してタグアンカーまたはテキストを一覧表示しますか？どんな助けでも