Question

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

Answer 2

您的所有文字都是红色的原因是您将color: red规则应用于您的父ul。这意味着ul内的所有内容都将为红色。你的第一个li收到了.emphasis班级，但是如果没有那个班级，那将是红色的。要更改代码，请使用class="emphasized"上的ul，然后将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>

使用jQuery查询DOM，代码无法正常工作？

3 个答案: