如何用JavaScript定位HTML中非直接子元素？Chartist.js图表元素定位

当然可以实现！要只定位id="chart1"容器内的.ct-series-a、.ct-series-b等<g>元素，完全可以通过范围限定的DOM查询来做到，不会和页面上其他同类图表的元素冲突。下面给你两种常用的实现方式：

一、原生JavaScript实现 #

先获取chart1的容器节点，再在这个节点的范围内查询目标元素，这样就不会跑到其他图表里去找了：

// 第一步：获取chart1的容器
const chart1 = document.getElementById('chart1');

// 方式1：获取chart1内所有.ct-series开头的元素
const allSeries = chart1.querySelectorAll('.ct-series');
// 可以遍历这些元素做操作
allSeries.forEach(series => {
  // 比如给元素添加关联元素
  const relatedElement = document.createElement('div');
  // ...后续操作逻辑
});

// 方式2：单独定位某一个特定的series，比如.ct-series-a
const seriesA = chart1.querySelector('.ct-series-a');

二、jQuery实现（如果项目已引入jQuery） #

用jQuery的层级选择器直接限定查询范围，写法更简洁：

// 获取chart1内所有.ct-series元素
const $allSeries = $('#chart1 .ct-series');

// 单独定位.ct-series-a
const $seriesA = $('#chart1 .ct-series-a');

关键注意点 #

因为Chartist.js是动态生成DOM结构的，所以一定要确保在图表渲染完成之后再执行元素查询代码。可以借助Chartist的created事件来确保时机正确：

// 初始化图表时绑定created事件
new Chartist.Line('#chart1', yourData, yourOptions).on('created', function() {
  // 这里的DOM已经渲染完成，可以安全查询元素
  const seriesElements = document.getElementById('chart1').querySelectorAll('.ct-series');
  // 执行你的关联元素生成逻辑
});

内容的提问来源于stack exchange，提问作者grahamfk45c