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

【问题标题】：Selecting multiple second instances of a queryselectorAll element?选择 queryselectorAll 元素的多个第二个实例？
【发布时间】：2020-12-30 23:49:15
【问题描述】：

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

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

【问题讨论】：

标签： javascript chartist.js

【解决方案1】：

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

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

【讨论】：

【解决方案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>

【讨论】：