如何找到具有相同类的父级兄弟的下一个元素

Question

尝试使父项的特定兄弟节目淡入或淡出。

<header class="myheader">
   <h1 class="title">Title 1</h1>
</header>
<ul class="my-list">
   <li>list item 1</li>
</ul>
<header class="myheader">
   <h1 class="title">Title 2</h1>
</header>
<p>description</p>
<ul class="my-list">
   <li>list item 1</li>
   <li>list item 2</li>
   <li>list item 3</li>
</ul>
<header class="myheader">
   <h1 class="title">Title 3</h1>
</header>
<ul class="my-list">
   <li>list item 1</li>
   <li>list item 2</li>
   <li>list item 3</li>
</ul>   

因此，使用上面的标记，我希望能够点击任何标题 h1 标记，并使下一个 ul 块可见（淡入）。

使用这个jQuery我可以隐藏所有 ul 块（在jquery中完成，所以如果js关闭，所有内容仍然可见），然后等待标题 h1 <上的点击事件/ strong>标记为＆＃39; myheading＆＃39;并使最近的兄弟 ul 阻止淡入。

jQuery(document).ready(function($) {
  $('.title').each(function() {
      $('ul.my-list').hide();

      $(this).click(function() {
         $(this).parent().next('ul.my-list').fadeToggle();
         return false;
      });
   });
});

但是，第二个标题失败了，因为它在 ul 块之前有一个段落标记。

如何为每个标题 h1 定位正确的 ul 标记？看作jQuery .next（）只找到直接邻居元素，它不会搜索具有指定搜索参数的最近的下一个元素，例如＆＃39; ul＆＃39;或者是一个班级。

我已尝试各种版本的.find（）,. next（）,. nextAll（）等但没有成功。我不想在标签上添加id，因为这会破坏使用this（）的目的。

有什么想法吗？

Answer 1

使用nextAll('ul.my-list:first')

next仅对第一个相邻项目进行限制。

nextAll会返回所有后续项目，然后可以对其进行过滤以返回第一项。

如果您愿意（也应该稍快一点），您也可以nextAll('ul.my-list').first()执行此操作

JsFiddle：http://jsfiddle.net/TrueBlueAussie/8ddnV/