jquery next()和不一定彼此相邻的元素

Question

我知道关于这个问题还有其他问题,但是我还没有得到任何工作,所以我会再问:

我有一个看起来像这样的HTML列表:

<ul>
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
  <li>Item four</li>
  <li>Item five</li>
</ul>

使用jQuery隐藏了一些li标签,有些使用.show()和.hide()可见

<ul>
  <li style="display: block">Item one</li>
  <li style="display: none">Item two</li>
  <li style="display: none">Item three</li>
  <li style="display: block">Item four</li>
  <li style="display: block">Item five</li>
</ul>

我还去了另一个jQuery,它为一个li标签添加了一个类,所以代码看起来像这样(代码只会将这个类添加到一个可见的li):

<ul>
  <li style="display: block" class="highlight">Item one</li>
  <li style="display: none">Item two</li>
  <li style="display: none">Item three</li>
  <li style="display: block">Item four</li>
  <li style="display: block">Item five</li>
</ul>

然后我需要做的是当一个事件发生时(在这种情况下用户点击向下键)我希望li和类一起删除它的类并将类添加到下一个可见的li.我本以为会这样做:

if (event.keyCode == '40') {
  $('li.highlight').removeClass('highlight').next(':visible').addClass('highlight');
}

但这只有在下一个可见的li是下一个li的情况下才有效.如何在所有情况下选择正确的元素？

Answer 1

尝试:

$('li.highlight')
    .removeClass('highlight')
    .nextAll(':visible:first')
    .addClass('highlight');

令人讨厌,令人困惑的是,接下来只会选择下一个兄弟姐妹.您可以通过传入选择器进行过滤这一事实使您认为它会一直持续到找到某些东西,但事实并非如此.next只有匹配传递的选择器时,过滤器表达式才会导致抓取下一个元素.

见http://api.jquery.com/nextAll/