Selecting submenu of Parent list not child list

Question

How we can select the submenu from parent list item only and not from child list item?

I have top-menu id which is first ul. Inside i have lots of li with ul (class sub-menu). Inside the submenu I am having different li which is also having li with same class (sub-menu).

This is the structure

   <div id="#top-menu">
      <li>
         <ul class="sub-menu">  //need to select this only
            <li>
               <ul class="sub-menu"> // Not this
            </li>
      </li>
      <li></li>
       <li></li>
         <ul class="sub-menu">
            <li></li>
               <ul class="sub-menu">
      <li></li>
      <li></li>
      <li></li>
   </div>

Temani but this will select the sub-menu which is inside li which is inside sub-menu. I dont want to select that — user5486312

Temani Afif Temani Afif · Accepted Answer · 2018-01-13T14:08:44

As I commented above here is the selector you can use (after correcting you markup):

$("#top-menu > li > ul.sub-menu").css('border', '1px solid #000');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top-menu">
  <li>
    <ul class="sub-menu" style="border :1px solid red"> //need to select this only
      <li>
        <ul class="sub-menu" style="border :1px solid red"> // Not this

        </ul>
      </li>
    </ul>
  </li>
  <li></li>
  <li></li>
  <ul class="sub-menu">
    <li></li>
    <ul class="sub-menu">
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </ul>
</div>

Selecting submenu of Parent list not child list

1 Answers