jquery如何找到下一个可见列表标签

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

Answer 1

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

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

Answer 2

您可以使用.nextAll("li:visible").eq(0)和.prevAll("li:visible").eq(0)获得下一首/上可见李标签

$('.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 3

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