如何用jQuery定位指定分组内的SVG Path元素？

当然可以实现！你用<g id="example">给目标Path分组的思路完全正确，只是可能在元素引用的方式上出了小问题。我给你两种实用的解决方案，一步步帮你精准控制函数的作用范围：

首先确保你的SVG结构类似这样：

<svg width="200" height="200">
  <!-- 这是你要操作的目标分组 -->
  <g id="example">
    <path d="M10 10 L50 10 L50 50 L10 50 Z" fill="#ff0000"/>
    <path d="M60 60 L100 60 L100 100 L60 100 Z" fill="#00ff00"/>
  </g>
  <!-- 这些外部Path不会被影响 -->
  <path d="M110 110 L150 110 L150 150 L110 150 Z" fill="#0000ff"/>
</svg>

然后在你的函数里，先定位到目标分组，再筛选内部的path元素：

// 获取目标分组元素
const targetGroup = document.getElementById('example');
// 提取分组内所有Path
const groupPaths = targetGroup.querySelectorAll('path');

// 遍历执行你的操作，比如修改填充色
groupPaths.forEach(path => {
  path.setAttribute('fill', '#cccccc');
});

这样就只会作用于id="example"分组内的Path，外部元素完全不受影响。

如果同一个分组里还有部分Path不需要操作，给目标Path加统一类名是更灵活的选择：

<svg width="200" height="200">
  <g id="example">
    <path class="target-path" d="M10 10 L50 10 L50 50 L10 50 Z" fill="#ff0000"/>
    <path class="target-path" d="M60 60 L100 60 L100 100 L60 100 Z" fill="#00ff00"/>
    <!-- 这个同组Path不会被操作 -->
    <path d="M10 60 L50 60 L50 100 L10 100 Z" fill="#ffff00"/>
  </g>
  <path d="M110 110 L150 110 L150 150 L110 150 Z" fill="#0000ff"/>
</svg>

函数里通过「分组ID + 类名」的组合选择器精准定位：

// 只选择example分组内带target-path类的Path
const targetPaths = document.querySelectorAll('#example .target-path');

targetPaths.forEach(path => {
  // 这里写你的操作逻辑，比如添加动画效果
  path.classList.add('animate-path');
});

如果你之前尝试分组没成功，大概率是这几个原因：

• 分组ID拼写错误（注意大小写和拼写，比如把example写成exmaple）
• 脚本在DOM未加载完成时就执行了：可以把脚本放在</body>标签前，或者用DOMContentLoaded包裹代码：

document.addEventListener('DOMContentLoaded', () => {
  // 这里写你的操作代码
});

• 错误地全局获取Path：比如直接用document.querySelectorAll('path')，而不是从分组元素内部获取

核心思路就是先锁定目标分组，再从分组内部筛选元素，而不是全局遍历所有Path，这样就能完美实现你的需求啦。

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