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>