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

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关闭，则所有内容仍然可见），然后等待点击具有“myheading”类的标题 h1 标记的事件，并使最近的下一个同级 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 块之前有一个段落标签。

我该如何针对每个标题

目标正确的 ul 标签呢？既然jQuery.next()只会找到直接相邻的元素，它不会搜索具有指定搜索参数（例如“ul”或类）的最近下一个元素。

我尝试了各种版本的.find()，.next()，.nextAll()等都没有成功。 我不想向标签添加id，因为这将失去使用this（）的意义。

有任何想法吗？

- user3657282

Answer 1

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

next仅限于第一个相邻项。

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

如果您喜欢，也可以使用nextAll('ul.my-list').first()进行操作（据说速度略快）

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

- Gone Coding

---

太好了！非常感谢。我忘记了:first。我实际上使用了你的第二个版本，用.first()，它很好用。 - user3657282