如何在div中找到具有相同類的最後兩個元素併爲它們分配一個類？

<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」，然後爲它們指定一個特定的類？如何在div中找到具有相同類的最後兩個元素併爲它們分配一個類？

來源

2013-11-04 Katie Chen

您可能要提供一些背景。有可能有更好的方式來做你正在做的事情。 – PitaJ

也許這個問題的答案將有所幫助：[jQuery：獲取最後兩個列表項？]（http://stackoverflow.com/questions/1257233/jquery-getting-the-two-last-list-items） – Shad

@PitaJ基本上是一個模板生成與'盒'類的div，我無法控制它。但是，我知道最後兩個.box我不需要顯示。所以我需要兩個是專門找到他們。 –

使用slice方法得到最後2個子元素&然後添加你想要的特定類。

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

來源

2013-11-04 01:16:03 Krishna

我試了一下，它的工作！非常感謝 –

你應該說你想要一個jQuery的答案。 –

我不記得標籤說jQuery，或者我會給一個jQuery的答案。無論如何，我想這兩個答案在未來都會有用。 –

對於您的具體問題......

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說，雖然，有可能是一個更好的方式來實現自己的目標的實際，如果您希望傳達出來。

來源

2013-11-04 01:13:59

您可以用CSS選擇nth-last-child選擇最後2盒：

.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

來源

2013-11-04 02:15:38 xeepete