如何使用jQuery向每个集合中的第一个子元素添加类

我希望在每组元素的第一个元素中添加一个类。但我的JS只适用于第一组

当文档在悬停状态下加载并删除一个类时，尝试将该类添加到集合的第一个元素中

HTML

<div id="mega-menu-container">
   <div id="mega-menu">
      <div class="menu-title active"><h4>.....</h4></div>
      <div class="menu-title"><h4>.....</h4></div>
      <div class="menu-title"><h4>.....</h4></div>
      <div class="menu-title"><h4>.....</h4></div>
      <div class="menu-title"><h4>.....</h4></div>
   </div>
   <div id="mega-menu">
      <div class="menu-title"><h4>.....</h4></div>
      <div class="menu-title"><h4>.....</h4></div>
      <div class="menu-title"><h4>.....</h4></div>
      <div class="menu-title"><h4>.....</h4></div>
      <div class="menu-title"><h4>.....</h4></div>
   </div>
</div>

问题

问题是-类“active”被添加到第一个集合的第一个div

菜单标题中，但不在第二个集合中，正如您在HTML中看到的那样。
您需要使用选择器来选择作为其父元素的第一个子元素的所有元素。：

$('#mega-menu-container .menu-title:first-child').addClass('active');

您还需要修复悬停事件，使其仅针对最近的相关元素，而不是所有元素。您可以使用当前元素上下文
此
以及遍历来定位其他h4元素。
您也可以通过CSS来完成此操作，而无需任何jquery。假设您的活动css正在将颜色更改为绿色或其他颜色。当整套都是红色的时候。那你就可以照我说的做了

这里我使用的是
#mega menu>：第一个孩子
非常好。如此愚蠢，我只使用了：第一个，从未想到：第一个孩子。谢谢你。也谢谢你的建议。现在将改进代码。谢谢。实际上，类.active不是手动添加的。它是使用.addClass（）对集合的每个第一个元素动态执行的。在悬停在子元素上时，也会删除该元素。因此，我认为CSS本身不能在这方面帮助我。
$('#mega-menu-container .menu-title:first-child').addClass('active');