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

问题描述

我尝试了在有关 Javascript 的类似问题中找到的解决方案，但是，这些解决方案都没有奏效。该脚本仍然继续以所有元素为目标，而不仅仅是最后一个。下面我包括了我最后一次尝试让它工作的尝试。我有一个 ID 为“mainChart”的图表，在该图表中，有一个包含“ct-bar”元素的“ct-series-b”元素。每次运行脚本时，我都需要定位包含在“ct-series-b”中的最后一个“ct-bar”元素。我该怎么做？

我已经尝试了所有这些解决方案：Shortest way to get last element by class name in javascript 并且充其量，它仍然针对所有“ct-bar”元素。

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)')

解决方法

您可以使用 :last-child 选择器。请注意，这将获得 each .ct-bar 下的最后一个 .ct-series-b，因此如果您只想要其中一个下的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>

buy

,

我不得不使用 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)
                            }