在javascript中通過類名獲取最後一個元素的最短途徑

Question

我知道使用jQuery可以很容易地使用:last選擇器來獲取最後一個元素。

$(".some-element:last") 

雖然，這並不不用JavaScript工作。

document.querySelectorAll(".some-element:last") 

什麼會做同樣的事情在javascript最好的和最短的方法是什麼？

編輯：

我沒有與id屬性的包裝元素，這是這樣，我不能使用lastChild。

Answer 1

在Selectors Overview

Ë看看：最後一個孩子

一個E元素，其父母的最後一個孩子

console.log(document.querySelectorAll(".some-element:last-child"))

<ul> 
 
    <li class="some-element">1</li> 
 
    <li class="some-element">2</li> 
 
    <li class="some-element">3</li> 
 
</ul>

--Update--

如果您有不共享相同的類名額外的元素，你可以嘗試喜歡使用

不同的方法

E：第n類型（n）

的E元素，它的類型的第n個兄弟姐妹，從最後一個

var lastLiItem = document.querySelectorAll("li:nth-last-of-type(1)"); 
 
var lastSomeElement = document.querySelectorAll("li:nth-last-of-type(2)"); 
 

 
console.log("This is the last li item in the list: ", lastLiItem[0]); 
 
console.log("This is the last li item with class .some-element in the list: ", lastSomeElement[0]);

<ul> 
 
    <li class="some-element">1</li> 
 
    <li class="some-element">2</li> 
 
    <li class="some-element">3</li> 
 
    <li>4</li> 
 
</ul>

還是要計算僅與類.some-element拿到最後一個元素簡單地做

var someElementsItems = document.querySelectorAll(".some-element"); 
console.log(someElementsItems[someElementsItems.length -1]) 

Answer 2

要找到一個元素的最後一個孩子，你可以使用這個：

var childrenCount = document.getElementById("myDIV").childNodes.length; 
document.getElementById("myDIV").childNodes[childrenCount-1]; 

Answer 3

請按照此步驟

1. 查看他的全部元素：var elems = document.querySelectorAll(".some-element");
2. 查找長度：var len = elems.length;
3. 獲取最後一個元素：var lastelement = len < 1 ? "" : elems[len-1];

希望它幫助。