定位元素/div 的下一个实例答案

【问题标题】：Target next instance of an element/div定位元素/div 的下一个实例
【发布时间】：2015-06-22 16:32:46
【问题描述】：

我有以下HTML 结构和JavaScript 文件：

.html

<li>
 <button class="show-more"></button>
 some more elements
 <div class="hidden"></div>
</li>

JavaScript

$( ".show-more" ).click(function() {
  event.preventDefault();
  $( this ).next().slideToggle( "fast", function() {
  });
});

我需要点击事件来切换.hidden 的下一个第一个实例，但是点击事件的目标是它之后的第一个元素，而不是.hidden 的下一个实例，有什么想法可以解决吗？

【问题讨论】：

注意：您必须将event 作为参数传递给.click 的回调函数才能使用event.preventDefault();
注意@empiric 的一个很好的捕捉：事实上，您的代码依赖于一个全局 event 对象，并依赖于它具有preventDefault 方法。它可以在现代 IE 和 Chrome 上运行，但在 Firefox（没有全局 event）和旧版 IE（有，但该事件没有 preventDefault）上会失败。

【解决方案1】：

nextAll 和first：

$(this).nextAll('.hidden').first().slideToggle(...);

【讨论】：

【解决方案2】：

另一种可能的解决方案：

$('~.hidden:first', this).slideToggle("fast");

这将在this 的上下文中匹配.hidden 类的第一个、下一个兄弟。 ~-selector 将到达所有以下兄弟姐妹。

参考

【讨论】：