Question

在这里或其他非基于jQuery的网站上，我似乎找不到与该主题相关的帖子。我需要一个简单的JavaScript解决方案来完成我需要做的事情。

好，所以我需要获取最后一个类名元素而不使用类似这样的

document.querySelectorAll('.name')[7].innerHTML;

我需要一个方法，不需要像上面的示例那样通过方括号之间的计数来计数和选择最后一个类名。之所以让我们只说我

在页面上有100个元素，它们的类名叫名字，在这种情况下，我不想使用上面的示例结构。

我被困在的代码

//????? I will like the last class name to be outputted in a alert but how?
/*alert(last_class_name);*/

  <h1 class='name'>Adam</h1>
  <h1 class='name'>Bob</h1>
  <h1 class='name'>Cindy</h1>
  <h1 class='name'>Danny</h1>
  <h1 class='name'>Eddy</h1>
  <h1 class='name'>Frank</h1>
  <h1 class='name'>George</h1>
  <h1 class='name'>Henry</h1>

注意：

问题解决了，请看一下我的答案和亚历山大·尼德的答案，以便更好地理解答案。

Answer 1

您可以在一个查询中获取名称，然后只需按总长度减去1的索引获取即可，如下所示：

let names = document.querySelectorAll('.name');
let last = names[names.length-1];
console.log(last);

  <h1 class='name'>Adam</h1>
  <h1 class='name'>Bob</h1>
  <h1 class='name'>Cindy</h1>
  <h1 class='name'>Danny</h1>
  <h1 class='name'>Eddy</h1>
  <h1 class='name'>Frank</h1>
  <h1 class='name'>George</h1>
  <h1 class='name'>Henry</h1>

Answer 2

以下代码使用了一个技巧，因为document.querySelectorAll()返回的是一个NodeList，并且不具有诸如.pop()之类的数组的正常功能。

此技巧将NodeList转换为Array，以便您可以致电.pop()

另一种方式是与亚历山大·尼德（Alexander Nied）在我设法完成此答案之前发表评论的方式相同。

let arr = [].slice.apply(document.querySelectorAll('.name'));
let lastEl = arr.pop();
console.log(lastEl.innerHTML);

<h1 class='name'>Adam</h1>
<h1 class='name'>Bob</h1>
<h1 class='name'>Cindy</h1>
<h1 class='name'>Danny</h1>
<h1 class='name'>Eddy</h1>
<h1 class='name'>Frank</h1>
<h1 class='name'>George</h1>
<h1 class='name'>Henry</h1>

修改

Alexander让我想起了ES6中的Spread Operator，可以将这段代码转换为

let arr = [...document.querySelectorAll('.name')];
let lastEl = arr.pop();
console.log(lastEl.innerHTML)

<h1 class='name'>Adam</h1>
<h1 class='name'>Bob</h1>
<h1 class='name'>Cindy</h1>
<h1 class='name'>Danny</h1>
<h1 class='name'>Eddy</h1>
<h1 class='name'>Frank</h1>
<h1 class='name'>George</h1>
<h1 class='name'>Henry</h1>

Answer 3

我无法决定在亚历山大·尼德（Alexander Nied）和耶赫特（Jhecht）之间哪种方法最适合我，因为我同样喜欢这两种顾问方法，但是在某些情况下，我会在

其他。因此，我将通过Jhecht关于性能问题的建议来决定最佳答案，因此Alexander Nied我将奖励您最佳答案。

如果特别是新手，有人试图通过使用Alexander Nied的方法来弄清楚如何获取值并将其输出到各种方法（如document.write，alert（）等）中，那么这就是我的方法。

var names = document.querySelectorAll('.name');
var lastClassNameOfName = names[names.length-1].innerHTML;
alert(lastClassNameOfName);

<h1 class='name'>Adam</h1>
<h1 class='name'>Bob</h1>
<h1 class='name'>Cindy</h1>
<h1 class='name'>Danny</h1>
<h1 class='name'>Eddy</h1>
<h1 class='name'>Frank</h1>
<h1 class='name'>George</h1>
<h1 class='name'>Henry</h1>

在普通js中获取姓氏名称

3 个答案: