javascript - 使用 jQuery 和 CSS 在特定元素之前和之后为 child 设置不同的样式？

Question

我需要为 li.done 设置特殊样式，具体取决于它们是在 li.current 之前还是之后。我如何使用 jQuery 或 CSS 做到这一点？

ul { list-style: none; padding: 0; margin: 0; }

ul li {
  display:inline-table;
  padding: 5px 12px;
  color: #ddd;
  background-color: #bbb;
  margin: 0;
}
.done {
  background-color: #ddd;
  color: #aaa
}
.current {
  background-color: #99f;
  color: #dee
}

<ul>
<li class="done">step 1</li>
<li class="done">step 2</li>
<li class="current">step 3</li>
<li class="done">step 4</li>
<li>step 5</li>
</ul>

Answer 1

你应该看看 jQuerys .prevAll() 和 .nextAll()。

var current = $(".current");
current.prevAll(".done").addClass("before");
current.nextAll(".done").addclass("after");

请注意，每次更改当前元素时都必须重做。

可以找到文档here和 here .