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

Posted 2023-02-25

【中文标题】如何找到具有相同类的父兄弟姐妹的下一个元素

【英文标题】：How to find the next element of parent siblings with same class

【发布时间】：2014-05-20 15:58:53

【问题描述】：

试图使父项的特定兄弟项淡入或淡出。

<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 带有 'myheading' 类的标签，并使最近的下一个兄弟 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() 只查找直接相邻元素，它不会使用指定的搜索参数搜索最近的下一个元素，例如 'ul' 或类。

我尝试了各种版本的 .find()、.next()、.nextAll() 等，但均未成功。我不想在标签中添加 id，因为这会破坏使用 this() 的意义。

有什么想法吗？

【参考方案1】：

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

next 仅限于第一个相邻项目。

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

如果您愿意，也可以使用nextAll('ul.my-list').first()（应该会稍微快一些）

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

【讨论】：

太棒了！非常感谢。我忘记了 :first 。我实际上将您的第二个版本与 .first() 一起使用，效果很好。