jQueryを使用して各セットの最初の子要素にクラスを追加する方法

Question

各要素セットの最初の要素にクラスを追加したいと思います。しかし、私の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> 

JS

(function($) { 
$(document).ready(function() { 
$('#mega-menu-container .menu-title').eq(0).addClass('active'); 

$('#mega-menu-container .menu-title h4').hover(function(){ 
    $('#mega-menu-container .menu-title').toggleClass('active').siblings().removeClass('active') 
}); 
$("#mega-menu-container .menu-title h4").mouseleave(function(){ 
    $('#mega-menu-container .menu-title').eq(0).addClass('active'); 
}); 
}); 
})(jQuery); 

PROBLEM

問題がある - クラス "アクティブは、" 最初のdivに追加されますは最初のセットには含まれていますが、2番目のセットには含まれていません。

Answer 1

あなたは彼らの親の最初の子であるすべての要素を選択する:first-childセレクターを使用する必要があります。：

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

あなたはまた、最も近い関連する要素ではなく、すべてのだけをターゲットにするホバーイベントを修正する必要があります。現在の要素コンテキストthisをトラバースとともに使用して、他のh4要素をターゲットにすることができます。

Answer 2

jqueryを使用せずにCSSでこれを行うこともできます。あなたのアクティブなCSSが色を緑に変えているか、これまでに何が起こったのかを考えてみましょう。全体のセットが赤であることを意味します。そして、あなたはここで私は#mega-menu > :first-child