选择 queryselectorAll 元素的多个第二个实例？

Question

我正在使用 Chartist，我需要向重复出现的第二次元素发送一些数据。例如，每个“ct-series”元素中都有两个“ct-bar”元素。我需要 select 每个“ct-series”元素中包含的第二个“ct-bar”元素。我曾尝试使用 for 循环和其他一些方法来执行此操作，但均无济于事。我怎样才能做到这一点？

JS

const series = xChart.querySelectorAll('.ct-series .ct-bar')
for (var i = 0; i < series.length; i++) {
                        this.element = series[i];
                        var seriesNext = series[1]
                    }

Answer 1

使用 :nth-child() 选择器获取每个系列的第二个子级。

const bars = xChart.querySelectorAll('.ct-series > .ct-bar:nth-child(2)');

Answer 2

您可以使用 :nth-child(2) css 选择器只抓住每个 ct-series 下的第二个 ct-bar 子项。请参阅下文了解其工作原理。

const series = document.querySelectorAll('.ct-series > .ct-bar:nth-child(2)')
for (var i = 0; i < series.length; i++) {
  console.log(series[i].textContent);
}

<div class="ct-series">
  <span class="ct-bar">foo 1</span>
  <span class="ct-bar">bar 1</span>
</div>
<div class="ct-series">
  <span class="ct-bar">foo 2</span>
  <span class="ct-bar">bar 2</span>
</div>

选择 queryselectorAll 元素的多个第二个实例？

Selecting multiple second instances of a queryselectorAll element?

javascript

chartist.js