Question

我有这个HTML代码：

  <div>
    <li>list item 1</li>
    <li>list item 2</li>
    <li class="third-item">list item 3</li>
    <li>list item 4</li>
    <li class="fifth-item">list item 5</li>
    <li>list item 5</li>
  </div>

和这个jQuery代码：

$( "li.third-item" ).next(".fifth-item").css( "background-color", "red" );

应该将此<li>项绘制为红色：

<li class="fifth-item">list item 5</li>

我尝试了各种各样的事情，但无法弄清楚发生了什么。

Answer 1

next() 会在元素之后立即选择兄弟姐妹，在您的情况下.fifth-item不会紧随其后。因此，您需要使用 nextAll() 和 first()

nextAll() - 获取元素旁边的所有兄弟姐妹
first() - 从集合中获取第一个元素

$("li.third-item").nextAll(".fifth-item").first().css("background-color", "red");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li class="third-item">list item 3</li>
  <li>list item 4</li>
  <li class="fifth-item">list item 5</li>
  <li>list item 5</li>
</ul>

next（）不选择元素

1 个答案: