Selenium：如何定位同页面特定div内的同ID/类元素？

嗨，我完全懂你现在的困扰——同页面6个Highcharts图表，每个容器里的按钮ID和类完全一致，直接绑事件肯定会串逻辑，对吧？我之前也碰到过几乎一模一样的场景，给你几个实用的解决方案：

1. 优先修正HTML结构（最佳实践） #

首先得明确：重复ID是不符合HTML规范的，这是问题根源。如果能控制页面生成逻辑，建议给每个按钮生成唯一ID，比如在原有ID后加图表索引：table-1、table-2...table-6。这样直接通过唯一ID绑定事件，逻辑最清晰：

// 假设按钮ID是table-1到table-6
for (let i = 1; i <= 6; i++) {
  document.getElementById(`table-${i}`).addEventListener('click', function() {
    // 找到对应容器里的Highcharts实例
    const chart = Highcharts.charts.find(c => c.renderTo.id === `chart-container-${i}`);
    // 执行最大化/最小化逻辑，比如切换容器类或者调用Highcharts方法
    chart.container.classList.toggle('maximized');
    chart.reflow(); // 让图表自适应容器尺寸变化
  });
}

2. 无法修改HTML时，通过父容器上下文定位按钮 #

如果暂时改不了重复的ID和类，那就利用每个图表都在独立div容器的特性，从容器出发找内部按钮，保证事件绑定到对应图表的按钮上：

原生JavaScript实现 #

// 假设每个图表容器有统一的类，比如chart-wrapper
document.querySelectorAll('.chart-wrapper').forEach((container, index) => {
  // 在当前容器内找目标按钮
  const toggleBtn = container.querySelector('.change');
  toggleBtn.addEventListener('click', function() {
    // 获取当前容器对应的Highcharts实例（Highcharts.charts按初始化顺序排列）
    const chart = Highcharts.charts[index];
    // 切换最大化/最小化状态
    if (chart.container.classList.contains('maximized')) {
      chart.setSize(null, null); // 恢复默认尺寸
      chart.container.classList.remove('maximized');
    } else {
      chart.setSize(window.innerWidth - 40, window.innerHeight - 80); // 自定义最大化尺寸
      chart.container.classList.add('maximized');
    }
  });
});

jQuery实现（如果项目用了jQuery） #

$('.chart-wrapper').each(function(index) {
  const $container = $(this);
  $container.find('.change').on('click', function() {
    const chart = Highcharts.charts[index];
    // 切换容器状态并让图表重绘
    $container.toggleClass('chart-maximized');
    chart.reflow();
  });
});

3. 绑定Highcharts实例到按钮 #

另一种思路是在初始化图表时，把实例直接关联到对应的按钮上，比如用dataset属性：

// 初始化图表时
const chartContainers = document.querySelectorAll('.chart-wrapper');
chartContainers.forEach((container, index) => {
  const chart = Highcharts.chart(container.querySelector('.chart'), {
    // 你的图表配置项
  });
  // 把图表实例索引存到按钮的dataset里
  container.querySelector('.change').dataset.chartIndex = index;
});

// 统一绑定按钮事件
document.querySelectorAll('.change').forEach(btn => {
  btn.addEventListener('click', function() {
    const chart = Highcharts.charts[this.dataset.chartIndex];
    // 执行状态切换逻辑
    chart.container.classList.toggle('maximized');
    chart.reflow();
  });
});

这样不管按钮ID怎么重复，都能精准找到对应的图表实例，不会出现串事件的问题。

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