Jquery select only first ul inside div

Question

I have a ul in div . And I have another ul inside li . I need to select only first ul which located inside the div . How to achieve that in jquery.

The markup.

<div class="parent">
  <div class="clearfix">
    <div class="another-div">
      <ul class="first-ul">
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
        <li>Fourth</li>
        <li>Fifth</li>
        <li>
          <ul class="second-ul">
            <li>First</li>
            <li>Second</li>
            <li>Third</li>
            <li>Fourth</li>
            <li>Fifth</li>
          </ul>        
        </li>
      </ul>
    </div>
  </div>
</div>

I want to select the first-li using only parent class. I have tried $('.parent > ul') but this is not working. and $('.parent ul') but this selects both ul. I don't want to use first-ul class or anything.

Answer 1

You can access the first ul in the following way also:

$('.parent ul:first li:first').css('color', 'blue');

ul:first will select the first ul in div with class as parent

Check this jsfiddle .

Answer 2

Like this:

 $("div > ul").addClass('selected'); 

 ul:not(.selected) { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="parent"> <div class="clearfix"> <div class="another-div"> <ul class="first-ul"> <li>First</li> <li>Second</li> <li>Third</li> <li>Fourth</li> <li>Fifth</li> <li> <ul class="second-ul"> <li>First</li> <li>Second</li> <li>Third</li> <li>Fourth</li> <li>Fifth</li> </ul> </li> </ul> </div> </div> </div>