Jquery wählen Sie nur zuerst ul innerhalb div

Question

Ich habe eine ul in div. Und ich habe noch eine ul innerhalb li. Ich muss nur zuerst ul auswählen, die innerhalb der div befindet. Wie man das in jQuery erreicht.

Das 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> 

Ich möchte die first-li mit nur parent Klasse auszuwählen. Ich habe versucht $('.parent > ul'), aber das funktioniert nicht. und $('.parent ul'), aber dies wählt beide ul. Ich möchte nicht first-ul Klasse oder irgendetwas verwenden.

Answer 1

Sie können auch die erste ul auf folgende Weise zugreifen:

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

ul: zunächst wird die erste ul wählen in div mit Klasse als Elternteil

Überprüfen Sie diese jsfiddle.

Answer 2

So:

$("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>