wählen Sie bestimmte Kinder aus einer verschachtelten Liste jquery

Question

Ich versuche, dieses Problem zu lösen- Ich möchte die ersten Kinder der LI "Sally" auswählen, derzeit ist meine Lösung die erste Liste ("Auto", "Boot "," Fahrrad "), aber auch die nächste Liste auswählen (" rot "," grün "," blau ") ... Wie kann ich das so lösen, dass nur die erste Liste zB (" Auto "," Boot ", "Fahrrad") ausgewählt?

<h2>Select specific children from a nested list.</h2> 
    <p>Select the only the first children of the LI "Sally".</p> 
    <div id="content2"> 
     <div> 
      <div> 
       <p>Some Text</p> 
       <p>Some More Text</p> 
       <div>Random Div</div> 
       <ul> 
        <li>Bob</li> 
        <li>Sally</li> 
         <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> 

Meine aktuelle Lösung ist ...

$("div#content2 > div > div > ul > ul > li").css("color", "red") 

Answer 1

Ich würde vorschlagen, dass Sie dies tun, indem Klasse zu ändern und stattdessen mit CSS.

Würde auch vorschlagen, dass Sie einige Attribute wie id oder Klasse auf dem der Wähler

benötigt

$("#content2 > div > div > ul > li > ul > li").addClass('red')

li, 
 
li.red li { 
 
    color: black 
 
} 
 
li.red, 
 
li.red li.red { 
 
    color: red 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  
 
<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>

Answer 2

zu vereinfachen <ul> verwenden würde ich zwei Zeilen verwenden, anstatt ein:

$(document).ready(function(){ 

$('div#content2 li li').css('color', 'red'); 
$('div#content2 li li li').css('color', 'black'); 

}); 

---

N.B. Ihr Markup sollte lauten:

<li>Sally 
    <ul> 

nicht:

<li>Sally</li> 
    <ul>