javascript - 检测具有类名 x 的最后一个 div 并向其添加一个新类 y

Question

我想知道，这是确定最后一个 div 并向其添加新类的最佳方法。它是javascript还是css3？

所以这是我的例子。假设我有这个：

<div class="items">
   <div class="raw">item 1</div>
   <div class="raw">item 2</div>
   <div class="raw">item 3</div>
   <div class="raw">item 4</div>
   <div class="raw">item 5</div>
   <div class="raw">item 6</div>
</div>

如何？什么方法？我可以在类名“raw”的最后一个 div 中添加一个新的类名“new”吗？

这样它就会变成：

<div class="raw new">item 6</div>

Answer 1

只是：

$('div.raw:last').addClass('new');

Answer 2

你可以通过纯CSS去：

div.raw:last-child {
    /* styles for the last element here */
}

或者，如果您需要在子集中更具体

div.raw:last-of-type {
    /* styles for the last element here */
}

以防万一，新类（-name）不是强制性的。

两个伪选择器都与最新的 W3C 浏览器兼容。IE从9开始。如果你急需支持IE7+我推荐这个小库：https ://code.google.com/p/ie7-js/

Answer 3

在 jQuery 中很简单：

$(".items > .raw:last").addClass("new");

在纯 JavaScript 中querySelector：

document.querySelector(".items > .raw:last-child").className += " new";

Answer 4

$('div.raw:last').addClass('new');