jQuery如何找到下一个可见列表标记 [英] jquery for how to find the next visible list tag

问题描述

有人可以从我的向下箭头键事件中找到下一个可见列表标记吗?

can any one help to find the next visible list tag from my down arrow key event?

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?任何帮助

That is from the above html construct, when the focus is in any of list tag, from that if i press down arrow it need to focus only the next visible list tag, not the hidden one, how to find the next visible list tag or list tag anchor or text using jquery? any help

推荐答案

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

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

这篇关于jQuery如何找到下一个可见列表标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！