如何在Raphael.js的Set集合中通过Title定位指定元素？

我明白你的困扰——Raphael.js的Set集合确实没有内置的按属性查找元素的方法，但我们可以通过两种实用的方式来解决这个问题，不用依赖索引或者this：

方法1：提前维护Title到元素的映射（推荐，高效） #

这种方式最适合需要多次查找的场景，因为我们在初始化元素时就建立好对应关系，后续查找直接读取即可，不用遍历集合。

首先修正你代码里重复声明regions的问题（你先声明了空对象又用数组覆盖，建议去掉空对象的声明），然后新增一个映射对象来存储标题和对应元素的关系：

var MAP_WIDTH = 600;
var MAP_HEIGHT = 600;
var mapContainer = document.getElementById("map");
var map = new Raphael(mapContainer, MAP_WIDTH, MAP_HEIGHT)
var group = map.set();

// 去掉重复的var regions = {}; 直接保留数组
var regions = [
 { 'title': "One", 'path': "m651.845 1021.74c-51.0321,-190.505 52.8953,-258.102 -72.0694,-253.37"},
 { 'title': "Two", 'path': "m534.899 632.399c-170.109,0.209524 -108.157,-95.2197 -331.825,-233.531"},
 { 'title': "Three", 'path': "m581.183 601.967c187.821,-0.668381 65.1258,-112.492 192.735,-339.055"}
];

// 新增映射对象，存储title对应元素
var regionTitleMap = {};

regions.forEach(function(region){
  // 先创建path元素并赋值给变量
  var regionElement = map.path(region.path).attr({
   'title':region.title,
   'stroke':"#FF0000",
   'fill':"#FFFFFF"
  });
  group.push(regionElement);
  // 将元素存入映射
  regionTitleMap[region.title] = regionElement;
});

之后你想修改Title为One的元素，直接通过映射调用即可：

// 修改填充色
regionTitleMap['One'].attr('fill', '#00FF00');

方法2：遍历Set集合查找（适合临时单次查找） #

如果只是偶尔需要查找元素，可以直接遍历Set集合，通过元素的title属性匹配目标：

// 封装一个查找函数
function getElementByTitle(set, targetTitle) {
  let targetElement = null;
  // Raphael的Set支持forEach遍历每个元素
  set.forEach(function(element) {
    if (element.attr('title') === targetTitle) {
      targetElement = element;
      return false; // 找到后立即终止遍历，提升效率
    }
  });
  return targetElement;
}

// 使用示例：找到Title为One的元素并修改填充色
const targetRegion = getElementByTitle(group, 'One');
if (targetRegion) {
  targetRegion.attr('fill', '#00FF00');
}

补充说明 #

• Raphael的Set本质上是类数组结构，所以可以用forEach方法遍历其中的每个元素；
• 元素的属性可以通过attr('属性名')来获取，所以我们能通过element.attr('title')拿到元素的标题进行匹配；
• 注意你代码里的小问题：重复声明了var regions = {}和var regions = [...]，后者会覆盖前者，建议删除空对象的声明，避免不必要的混淆。

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