入れ子リストから特定の子供を選択する

Question

私はこの問題を解決しようとしています.LI "sally"の最初の子を選択したいと思います。現在、私の解は最初のリストを選択しています （ "car"、 "boat "、"自転車 "）だけでなく、次のリスト（"赤 "、"緑 "、"青 "）を選択...これはどのように最初のリスト（すなわち、"車 "、"ボート " "bike"）が選択されていますか？

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

私の現在のソリューションは、私はあなたがクラスを変更し、代わりにCSSを使用してこれを行うことをお勧め...

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

Answer 1

です。

$(document).ready(function(){ 

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

}); 

：

はまた、あなたが私は2つのラインではなく、1を使用するセレクタが

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

を必要として簡素化するために <ul>にIDやクラスのようないくつかの属性を使用することをお勧め

---

N.B.あなたのマークアップは次のようになります。

<li>Sally 
    <ul> 

ない：確かに動作しない

<li>Sally</li> 
    <ul>