我遇到了这样一种情况:我试图获取列表中的最后一个li项,然后获取最后一个li项中的锚标记,这样我就可以使用类名'buyButton‘更改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
我一点也想不出来。在这方面的任何帮助都将不胜感激
发布于 2018-08-04 03:49:45
上一个示例不起作用的原因是因为您使用的是buttonBuy
类,而不是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>
发布于 2018-08-04 03:06:53
一旦我们有了对最后一个LI的引用,我们就可以在LI本身中执行querySelectorAll:
var aWithinLastProduct = lastProduct.querySelectorAll('a')[0];
https://stackoverflow.com/questions/51678629
复制相似问题