使用 jQuery 查询 DOM，代码不起作用

Question

这真的很奇怪，我检查了jQuery API，以确保自教程创建以来事情没有改变。

但是上面的代码仍然给了我所有的子元素，它们是我是第一个，你是第二个，来自嵌套的 Hello 而不是第一个元素。

$('ul.emphasis').children('li').first().addClass('emphasis');

.emphasis {
  color: red;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="container">
  <h1>Welcome to my website</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus suscipit rem quibusdam sapiente obcaecati unde quod sed? Veritatis, laudantium? Ullam aliquid, rem ipsum cupiditate non repellendus culpa consequatur incidunt, perspiciatis!</p>
  <ul class="emphasis">
    <li>I am first</li>
    <li>YOu are second</li>
    <li>
      <ul>
        <li>Hello from the nest</li>
      </ul>
    </li>
  </ul>
</div>

Answer 1

您的代码的行为符合您最初的预期，因为.first()的结果仅返回包含文本"I am first"的 li 元素。当您在浏览器中打开它时，所有元素都显示为红色的原因是您正在为父级和子级重用类emphasis。由于color和font-weight是继承的CSS属性，因此ul.emphasis下的所有li元素都将是红色和粗体。但就像我说的，只有第一个li元素具有emphasis类。

Answer 2

所有文本均为红色的原因是您将color: red规则应用于父ul。 这意味着ul内的所有内容都将是红色的。 您的第一个li正在接收.emphasis类，但无论如何，如果没有该类，它将是红色的。 要更改代码，请在ul上使用class="emphasized"，然后将 jQuery 中的选择器更改为 $('ul.emphasized') 。

下面是代码的工作版本：

$('ul.emphasized').children('li').first().addClass('emphasis');

.emphasis {
  color: red;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="container">
  <h1>Welcome to my website</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus suscipit rem quibusdam sapiente obcaecati unde quod sed? Veritatis, laudantium? Ullam aliquid, rem ipsum cupiditate non repellendus culpa consequatur incidunt, perspiciatis!</p>
  <ul class="emphasized">
    <li>I am first</li>
    <li>YOu are second</li>
    <li>
      <ul>
        <li>Hello from the nest</li>
      </ul>
    </li>
  </ul>
</div>

Answer 3

您只需为父选择器使用不同的类并添加实际样式即可。

$('ul.emphasize').children('li').first().addClass('emphasis');

.emphasis {
  color: red;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="container">
  <h1>Welcome to my website</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus suscipit rem quibusdam sapiente obcaecati unde quod sed? Veritatis, laudantium? Ullam aliquid, rem ipsum cupiditate non repellendus culpa consequatur incidunt, perspiciatis!</p>
  <ul class="emphasize">
    <li>I am first</li>
    <li>YOu are second</li>
    <li>
      <ul>
        <li>Hello from the nest</li>
      </ul>
    </li>
  </ul>
</div>