按类选择某个元素中包含的最后一个元素

Question

我尝试过关于Javascript的类似问题中的解决方案，但这些解决方案都不起作用。脚本仍然继续以所有元素为目标，而不是仅以最后一个元素为目标。以下是我最后一次尝试让它发挥作用。我有一张id为"；mainChart"；在该图表中；ct-系列-b"；包含"；ct条"；元素。我需要瞄准最后一个"；ct条"；包含在"；ct-系列-b"；每次运行脚本时。我该怎么做？

我已经尝试了所有这些解决方案：在javascript中按类名获取最后一个元素的最短方法，充其量，它仍然针对所有的"ct条"；元素。

JS-

const Chart = document.getElementById("mainChart");
const series = Chart.querySelectorAll('.ct-series-b > .ct-bar')
var last = Chart.querySelectorAll('.ct-series-b > .ct-bar:nth-last-of-type(1)')

Answer 1

您可以使用:last-child选择器。请注意，这将获得每个.ct-series-b下的最后一个.ct-bar，因此，如果您只想将其放在其中一个下，则可以调整查询。

const Chart = document.getElementById("mainChart");
const last = Chart.querySelectorAll('.ct-series-b > .ct-bar:last-child')
console.log(last[0].textContent);
console.log(last[1].textContent);

<div id="mainChart">
<div class="ct-series-b">
<div class="ct-bar">1</div>
<div class="ct-bar">2</div>
<div class="ct-bar">3</div>
<div class="ct-bar">4</div>
</div>
<div class="ct-series-b">
<div class="ct-bar">5</div>
<div class="ct-bar">6</div>
<div class="ct-bar">7</div>
<div class="ct-bar">8</div>
</div>
</div>

Answer 2

我不得不使用for循环来让它做我想做的事情。现在它可以正确地标记图表中的每个条形图。

JS-

var series = Chart.querySelectorAll('.ct-series-b > .ct-bar')
for (var i = 0; i < data.length; i++) {
var seriesLabel = data.labels[i]
$(series[i]).attr("ct:info", seriesLabel)
}