Question

任何人都可以帮助我从我的向下箭头键事件中找到下一个可见列表标记吗？

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构造，当焦点在任何list标签中时，如果我按下箭头它需要只关注下一个可见列表标签，而不是隐藏的标签，如何找到下一个可见使用jquery列出标签或列表标签锚或文本？任何帮助

Answer 1

您可以使用.nextAll("li:visible").eq(0)和.prevAll("li:visible").eq(0)获取下一个/上一个可见的li标记

 $('.langCountryListLeftPanel li a').keydown(function(e) {
     // For keyboard shortcuts for "Down arrow" pressing 
     if (e.keyCode == 40) {
         $(this).closest("li").nextAll("li:visible").eq(0).find("a").focus();
         return false;
     }
     // For keyboard shortcuts of "Up arrow" pressing 
     if (e.keyCode == 38) {
         $(this).closest("li").prevAll("li:visible").eq(0).find("a").focus();
         // if its first child focus goes to parent search input
         if ($(this).closest("li").is(':first-child')) {
             $(this).closest(".langCountrySearchContainer").find(".filterLangCountry").focus();
             return false;
         }
     }
 });

Fiddle Demo

Answer 2

试 * $('li').find(':not([style="display: none;"])');

Answer 3

As next() with :visible selector has some bug so Try this one:

   $(this).parent("li").nextAll("li:visible").first().text()

jquery有关如何查找下一个可见列表标记的信息

3 个答案: