Question

我遇到一种情况，我试图获取列表中的最后一个li项目，然后在该最后一个li项目中获取定位标记，因此我可以使用类名'来更改a标签的href值和文本值。 buyButton”。

我的列表如下所示：

<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本身内使用querySelectorAll：

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

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

2 个答案: