在javascript中按类名获取最后一个元素的最短方法

Question

我知道通过使用jQuery，您可以轻松使用:last选择器来获取最后一个元素。

$(".some-element:last")

虽然不可以使用javascript。

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

在javascript中做同样事情的最佳和最短的方法是什么？

修改

我没有带id属性的包装器元素，这是我无法使用lastChild的方式。

Answer 1

查看Selectors Overview

  

<强> E：最后子

     

一个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>

<强> - 更新 -

如果您有其他不共享相同类名的元素，您可以尝试使用其他方法，例如使用

  

<强> 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

querySelectorAll返回NodeList对象，该对象可以转换为Array。然后pop返回最后一个元素。

ES2015 / ES6：

Array.from(document.querySelectorAll('.some-element')).pop();

演示：

function addItem(withClass){
  document.body.insertAdjacentHTML('beforeend', withClass
    ? '<div class="some-element">with class</div>'
    : '<div>without class</div>'
  )
  
  findLastOfClass('.some-element')
}

function findLastOfClass(selector){
  var lastOfClass = [...document.querySelectorAll(selector)].pop()
  
  // temporarily highlight last-of-class
  if( lastOfClass ){
    lastOfClass.classList.add('highlight')
    setTimeout(()=> lastOfClass.classList.remove('highlight'), 1000)
  }
}

.highlight{ background: lightyellow }

<button onClick="addItem(true)">add item with class</button>
<button onClick="addItem()">add item without class</button>

---

较旧的浏览器（IE8 +）：

Array.prototype.pop.call(document.querySelectorAll('.some-element'));

Answer 4

请按照以下步骤

1. 查找所有元素：var elems = document.querySelectorAll(".some-element");
2. 查找长度：var len = elems.length;
3. 获取最后一个元素：var lastelement = len < 1 ? "" : elems[len-1];

希望它有所帮助。