使用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没有ID为test且包含<li>的元素。

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