jquery - jQueryを使用してhtmlに2番目のクラスを追加します

Question

jQuery のリスト項目に 2 番目のクラスを追加しようとしています。クラスが追加されているように見えますが、スタイリングは適用されていません。ただし、2 番目のクラスをインラインで追加すると、期待どおりに動作します。

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

testあなたの HTML には、を含むのID を持つ要素がありません<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;
}