Добавление уникального класса в wp_nav_menu

Question

Как я могу добавить уникальный класс к прямым дочерним элементам li основного родительского элемента ul, сгенерированного с помощью wp_nav_menu?

HTML:

<div class="menu_element"></div> 
<nav id="access" role="navigation"> 
    <div class="menu-main-container"> 
    <ul id="menu-main" class="menu"> 
     <li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30"><a href="http://www.site/page1-2/">Page1</a> 
     <ul class="sub-menu"> 
      <li id="menu-item-50" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-50"><a href="http://www.site/sub-page1-1/">Sub-Page1-1</a></li> 
      <li id="menu-item-49" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-49"><a href="http://www.site/sub-page1-2/">Sub-Page1-2</a></li> 
     </ul> 
     </li> 
    </ul> 
    </div> 
</nav> 

JQuery:

$('#menu-main > .menu-item').mouseenter(function(){ 
    $('.menu_element').appendTo(this); 
    hoverOn(); 
}); 
$('#menu-main > .menu-item').mouseleave(function(){ 
    hoverOff(); 
    $(this).remove($('.menu_element')); 
}); 

Я хотел бы добавить класс menu_element к li id="menu-item-30" и каждому ребенку Ли материнской ул после. Это возможно?

Заранее благодарен!

Answer 1

Ваш селектор предназначен для .menu-main (a class), если у вас есть id. Вам необходимо:

$('#menu-main > .menu-item').mouseenter(function(){ 
    $('.menu_element').appendTo(this); 
    hoverOn(); 
}); 
$('#menu-main > .menu-item').mouseleave(function(){ 
    hoverOff(); 
    $(this).remove($('.menu_element')); 
});