Question

我正在使用 Chartist，我需要向重复的第二次出现的元素发送一些数据。例如，每个“ct-series”元素内都有两个“ct-bar”元素。我需要选择包含在每个“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-bar 下的第二个 ct-series 子项。请参阅下文了解其工作原理。

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 元素的多个第二个实例？

2 个答案: