Javascript ES6 获取最后一个 li 项内的锚标记

Question

我有一种情况，我试图获取列表中的最后一个 li 项目，然后在最后一个 li 项目中获取锚标记，这样我就可以使用 classname 更改 a 标签的 href 值和文本值购买按钮'。

我的列表如下所示：

<li class="item">
<a href="test.html" class="buyButton">Buy</a>
<a href="compare.html" class="compare">Compare</a>
</li>
<li class="item">
<a href="test.html" class="buyButton">Buy</a>
<a href="compare.html" class="compare">Compare</a>
</li>
<li class="item">
<a href="test.html" class="buyButton">Buy</a>
<a href="compare.html" class="compare">Compare</a>
</li>
<li class="item">
<a href="test.html" class="buyButton">Buy</a>
<a href="compare.html" class="compare">Compare</a>
</li>

我用来选择最后一个列表的 javascript 正在运行。代码如下：

var numProducts = document.querySelectorAll('.item').length;
var lastProduct = document.querySelectorAll('.item')[numProducts -1];

我正在尝试下面的代码来获取最后一个 li 项中的锚标记，但它不起作用：

document.querySelectorAll('.item a.buttonBuy')[numProducts -1]
//not working

document.querySelectorAll('.buttonBuy')[numProducts -1]
//also not working

我根本想不通。对此的任何帮助将不胜感激

Answer 1

最后一个示例不起作用的原因是因为您使用的是 buttonBuy 类，而不是 HTML 中的 buyButton。

执行您的请求最简单的方法是使用容器选择最后一项，然后您可以选择锚点并根据需要进行修改：

let link = document.querySelector('ul > .item:last-child > .buyButton');

link.textContent = '*Updated*'
link.href        = 'javascript:alert("foo")'

<ul>
  <li class="item">
    <a href="test.html" class="buyButton">Buy</a>
    <a href="compare.html" class="compare">Compare</a>
  </li>
  <li class="item">
    <a href="test.html" class="buyButton">Buy</a>
    <a href="compare.html" class="compare">Compare</a>
  </li>
  <li class="item">
    <a href="test.html" class="buyButton">Buy</a>
    <a href="compare.html" class="compare">Compare</a>
  </li>
  <li class="item">
    <a href="test.html" class="buyButton">Buy</a>
    <a href="compare.html" class="compare">Compare</a>
  </li>
</ul>

Answer 2

一旦我们有了对最后一个 LI 的引用，我们就可以在 LI 本身内查询SelectorAll：

var aWithinLastProduct = lastProduct.querySelectorAll('a')[0];