jQuery wählen Sie nur ein Kind in Multi-Level-Liste

Question

Ich habe gesucht und kann nicht scheinen, einen Weg zu finden, nur ein Kind zu bekommen, wenn es mehrere ul/li-Listen gibt. Ich muss nur das erste Kind von "Sally" auswählen, aber mit "first" oder "nth" children gebe ich dieses Kind aus allen Listen. Ich habe versucht mit eq() und das hat auch nicht funktioniert. Hier ist der n-te Code, den ich mit der jQuery darunter habe.

<div id="content2"> 
    <div> 
     <div> 
      <p>Some Text</p> 
      <p>Some More Text</p> 
      <div>Random Div</div> 
      <ul> 
       <li>Bob</li> 
       <li>Sally 
        <ul> 
         <li>Car</li> 
         <li>Boat</li> 
         <li>Bike 
          <ul> 
           <li>Red</li> 
           <li>Green</li> 
           <li>Blue</li> 
          </ul> 
         </li> 
        </ul> 
       </li> 
       <li>Larry</li> 
       <li>Mo</li> 
      </ul> 
     </div> 
    </div> 
</div> 

$("#content2 ul li:nth-child(1)").append("<span> - 1st of Sally </span>"); 

Answer 1

$("#content2 ul:eq(1) li:eq(0)") würde die erste li in der zweiten ul übereinstimmen, die in Ihrer html Sally erstes Kind passen würde, "Auto".

Ziemlich fragile, wie auch jede Übereinstimmung basierend auf Element Reihenfolge. Ich würde vorschlagen, wenn möglich, explizite Klassennamen zu Elementen hinzuzufügen, die Sie ändern möchten.

Answer 2

$("#content2 div > ul > li > ul > li:nth-child(1)").append("<span> - 1st of Sally </span>"); 

Dies ist nicht schön, aber würde die Arbeit machen. Wenn Sie div am Anfang nicht aufführen, würde auch Rot ausgewählt, da ul > li > ul > li auch für Rot gilt.