从嵌套列表jquery中选择特定的孩子答案

【问题标题】：select specific children from a nested list jquery从嵌套列表jquery中选择特定的孩子
【发布时间】：2016-12-11 22:58:22
【问题描述】：

我正在尝试解决这个问题 - 我想选择 LI“sally”的第一个孩子，目前我的解决方案是选择第一个列表（“汽车”，“船”，“自行车”），还选择下一个列表（“红色”，“绿色”，“蓝色”）......我该如何解决这个问题，只有第一个列表即（“汽车”、“船”、“自行车”) 被选中？

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

我目前的解决方案是……

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

【问题讨论】：

标签： jquery jquery-selectors

【解决方案1】：

我建议您通过更改类并改用 css 来做到这一点。

还建议您在<ul> 上使用一些属性，例如 id 或 class 来简化所需的选择器

$("#content2 &gt; div &gt; div &gt; ul &gt; li &gt; ul &gt; 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>

【讨论】：

【解决方案2】：

我会使用两行，而不是一行：

$(document).ready(function(){

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

});

注意您的标记应为：

<li>Sally
    <ul>

不是：

<li>Sally</li>
    <ul>

【讨论】：