javascript - jQuery nth-child() 在第二个 li 中插入 css 类

Question

我想插入类.tech在第二个<li>下面的代码有什么问题？

html:

<div class="menu">
  <nav class="sidebar">
    <div class="client">
      <div class="client-open">
        <ul class="sidebar-nav">
          <li>link1</li>
          <li>link 2</li>
        </ul>
      </div>
    </div>
  </nav>
</div>

jquery:

$(function() {
    $( ".sidebar-nav ul li:nth-child(2)" ).addClass('tech');
});

Answer 1

.sidebar-nav 是 ul，因此在 .sidebar-nav 之后的选择器中不需要 ul :

$( ".sidebar-nav li:nth-child(2)" ).addClass('tech');

你可以在类之前添加它来指定该类属于ul:

$( "ul.sidebar-nav li:nth-child(2)" ).addClass('tech');

注意:由于您使用的是jquery，因此您可以使用 :eq() (从零开始)选择器:

$( "ul.sidebar-nav li:eq(1)" ).addClass('tech');

希望这有帮助。

$(function() {
  $( "ul.sidebar-nav li:eq(1)" ).addClass('tech');
});

.tech{
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
  <nav class="sidebar">
    <div class="client">
      <div class="client-open">
        <ul class="sidebar-nav">
          <li>link1</li>
          <li>link 2</li>
        </ul>
      </div>
    </div>
  </nav>
</div>