Question

比方说，我有一个简单的HTML标记，其中包含三个元素和一个遍历所有元素的javascript循环。我需要做的是选择其中一项的最后一项。

这堆代码将运行一个循环，选择some_div类的所有元素，然后在其中粘贴一些文本...

如果我只希望选择并更改列表中的最后一项怎么办？

有没有办法让我只选择循环中的最后一项，然后执行一些操作，例如向该确切元素添加特定的类？

var elements = document.getElementsByClassName('some_div');
for (var i=0; i<elements.length; i++) {

    elements[i].innerHTML = 'hello';
}

.some_div {
  height: 30px;
  width: 100px;
  border-bottom: solid 2px black;
}

<body>
 <div class="some_div"></div>
 <div class="some_div"></div>
 <div class="some_div"></div>
</body>

Answer 1

选择一个类的最后一个匹配项（例如，使用CSS选择器）很尴尬¹，但是您可以轻松地访问最后一个匹配项：

var elements = document.getElementsByClassName('some_div');
var last = elements[elements.length - 1];
if (last) {
    last.innerHTML = 'hello';
}

实时示例：

var elements = document.getElementsByClassName('some_div');
var last = elements[elements.length - 1];
if (last) {
    last.innerHTML = 'hello';
}

.some_div {
  height: 30px;
  width: 100px;
  border-bottom: solid 2px black;
}

<body>
 <div class="some_div"></div>
 <div class="some_div"></div>
 <div class="some_div"></div>
</body>

¹（或不可能？:nth-last-of-type适用于元素类型，而不适用于类...）

Answer 2

由于elements是类似数组的对象，因此您可以轻松索引最后一项

const elements = document.getElementsByClassName('some_div');
if(elements.length > 0){
     const lastElement = elements[elements.length-1]
}