首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >jquery next()和不一定相邻的元素

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

Stack Overflow用户
提问于 2010-07-20 23:21:01
回答 1查看 2.9K关注 0票数 4

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

我有一个html列表,如下所示:

代码语言:javascript
代码运行次数:0
运行
复制
<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()可以看到一些。

代码语言:javascript
代码运行次数:0
运行
复制
<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中):

代码语言:javascript
代码运行次数:0
运行
复制
<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删除它的class,并将这个类添加到下一个可见的li中。我本以为这样就行了:

代码语言:javascript
代码运行次数:0
运行
复制
if (event.keyCode == '40') {
  $('li.highlight').removeClass('highlight').next(':visible').addClass('highlight');
}

但这只有在下一个可见的li是下一个li的情况下才有效。如何让它在所有情况下都选择正确的元素?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2010-07-20 23:22:48

尝试:

代码语言:javascript
代码运行次数:0
运行
复制
$('li.highlight')
    .removeClass('highlight')
    .nextAll(':visible:first')
    .addClass('highlight');

令人恼火且令人困惑的是,next将只选择下一个兄弟。您可以通过传入选择器进行过滤,这一事实使您认为它会一直运行,直到找到某些东西,但事实并非如此。过滤器表达式将导致next仅在与传递的选择器匹配的情况下获取下一个元素。

请参阅

票数 10
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/3291541

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档