如何只选择具有相同类名的元素列表中的第一个元素

Question

I have the following code in jquery to display items for a sub menu:

$(document).ready(function(){
  $(".menu > .menu-item").mouseenter(function(){
    if($(this).has(".sub-menu").length){
      $(".sub-menu",this).fadeIn(500);
      $(".sub-menu",this).css("margin","0 40px");
      $(".sub-menu",this).css("position","fixed");
      $(".sub-menu",this).css("z-index","10");
    }
  })
  .mouseleave(function(){
    if($(this).has(".sub-menu").length){
      $(".sub-menu",this).fadeOut(500);
    }
  });
});

It works fine when the sub menu element doesn't have other sub elements, but when I add a sub element both are displayed at the same time.

I want to display only the sub elements and if any sub element has more sub elements inside of it, display them as well only when the mouse is over the main sub element.

This is the code generated automatically when I add sub elements to the menu:

<li id="menu-item-12" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-12">
  <a href="http://localhost:8080/testoir/sample-page/">Audiologia</a>
  <ul class="sub-menu" style="display: none; margin: 0px 40px; position: fixed; z-index: 10;">
    <li id="menu-item-17" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-17"><a href="#">option1</a>
      <ul class="sub-menu" style="display: none; margin: 0px 40px; position: fixed; z-index: 10;">
        <li id="menu-item-18" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-18"><a href="#">option2</a></li>
      </ul>
    </li>
  </ul>
</li>

How can I do this?

Thank you very much for your time and help.

Answer 1

$(".sub-menu", this) will match sub-menus at any depth. If you just want the immediate children, use $(this).children(".sub-menu") .

 $(document).ready(function() { $(".menu > .menu-item").mouseenter(function() { if ($(this).children(".sub-menu").length) { $(this).children(".sub-menu") .fadeIn(500) .css({ "margin": "0 40px", "position": "fixed", "z-index": "10" }); } }) .mouseleave(function() { if ($(this).children(".sub-menu").length) { $(this).children(".sub-menu").fadeOut(500); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="menu"> <li id="menu-item-12" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-12"> <a href="http://localhost:8080/testoir/sample-page/">Audiologia</a> <ul class="sub-menu" style="display: none; margin: 0px 40px; position: fixed; z-index: 10;"> <li id="menu-item-17" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-17"><a href="#">option1</a> <ul class="sub-menu" style="display: none; margin: 0px 40px; position: fixed; z-index: 10;"> <li id="menu-item-18" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-18"><a href="#">option2</a> </li> </ul> </li> </ul> </li> </ul> 

Answer 2

To get a array of elements with the same classname in pure Javascript:

var elements = document.getElementsByClassName('className');

To get the first element with the specified classname above:

var element = elements[0];

If you wanted to get the second element it would be:

var element = elements[1];