javascript - 如何在 div 中找到具有相同类的最后两个元素并为它们分配一个类？

Question

<div id="main-container">
    <div class="box">apple</div>
    <div class="box">bus</div>
    <div class="box">cattle</div>
    <div class="box">dog</div>
    <div class="box">eggplant</div>
    <div class="box">fox</div>
    <div class="box">goat</div>
</div>

如何在“#main-container”中找到最后两个“.box”，然后为它们分配特定的类？

Answer 1

使用该slice方法获取最后 2 个子元素，然后添加您想要的特定类。

$('#main-container .box').slice(-2).addClass('someclass')

Answer 2

您可以使用 css 选择器选择最后两个框nth-last-child：

.box:nth-last-child(-n+2) {}

http://jsfiddle.net/ekDbA/

浏览器支持 IE9+ https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child?redirectlocale=en-US&redirectslug=CSS%2F%3Anth-last-child

Answer 3

对于您的具体问题...

var main = document.getElementById('main-container');
var boxes = main.getElementsByClassName('box');

boxes[boxes.length - 2].className += ' a-class'; // 2nd to last
boxes[boxes.length - 1].className += ' a-class'; // last

不过，正如 PitaJ 所说，如果您愿意传达它，可能会有更好的方法来实现您的实际目标。