jQuery выберите только один дочерний элемент в многоуровневом списке

Question

Я искал и не могу найти способ получить только один ребенок, если есть несколько списков ul/li. Мне нужно выбрать только первого ребенка из «Салли», но использование «первых» или «n-й» детей даст мне этот ребенок из всех списков. Я пробовал использовать eq(), и это тоже не сработало. Ниже приведен код n-го кода с jQuery под ним.

<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)") будет соответствовать первому li во втором ul, что в вашем HTML будет соответствовать первому ребенку Салли, «автомобиль».

Довольно хрупкий, хотя, как и любое соответствие, основанное на порядке элементов. Я бы предложил добавить явные имена классов в элементы, которые вы планируете изменить, если это возможно.

Answer 2

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

Это не очень, но выполнит эту работу. Если вы не указали div в начале, также будет выбран красный цвет, так как ul > li > ul > li также относится к красным.