jquery - 使用 jQuery 将第二个类添加到 html

Question

我正在尝试向 jQuery 中的列表项添加第二个类。似乎正在添加该类，但未应用样式。但是，如果我添加第二个内联类，它会按预期工作。

HTML

<div id="container">
  <ul id="myList">
    <li>First</li>
    <li>Second</li>
    <li class="firstClass">Third</li>
  </ul>
</div>

CSS

#container #myList .firstClass.addedClass {
  color:red;
}

jQuery

$("#container #test li:last-child").addClass('addedClass');

Answer 1

您的 html 没有test包含<li>'s 的 id 的元素。

<div id="container">
    <ul id="myList">
      <li>First</li>
      <li class="firstClass">Second</li>
      <li>Third</li>
    </ul>
  </div>

您的选择器应更改为：

  $("#container #myList li:last-child").addClass('addedClass');

或者以更简单的形式（因为您要关闭 id）：

$("#myList").find("li:last-child").addClass('addedClass');

你的CSS也应该是：

#myList .addedClass {
  color:red;
}

由于您的last-child元素没有类firstClass或父级#test

此外，如果您的意图只是针对列表中的最后一个元素来影响显示，您可以使用 css 执行此操作：

#myList :last-child {
  color:green;
}