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 没有 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的 parent

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

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