将类添加到父SVG元素和子SVG元素

Question

我需要遍历多个路径容器<g>，并为每个容器添加一个唯一的类，然后对于容器内的每个路径，我需要添加一个唯一的类。

这是我的输出：

<svg> 
    <g> 
    <path class="active" fill="#1f77b4" d="M1.0715305595945801e-14,-175A175,175 0 0,1 151.55444566227678,87.49999999999997L138.5640646055102,79.99999999999997A160,160 0 0,0 9.796850830579018e-15,-160Z"></path> 
    <path class="active" fill="#aec7e8" d="M151.55444566227678,87.49999999999997A175,175 0 0,1 -151.55444566227675,87.50000000000006L-138.56406460551017,80.00000000000006A160,160 0 0,0 138.5640646055102,79.99999999999997Z"></path> 
    <path class="active" fill="#ff7f0e" d="M-151.55444566227675,87.50000000000006A175,175 0 0,1 -3.21459167878374e-14,-175L-2.9390552491737054e-14,-160A160,160 0 0,0 -138.56406460551017,80.00000000000006Z"></path> 
    </g> 
    <g> 
    <path class="active" fill="#1f77b4" d="M1.0715305595945801e-14,-175A175,175 0 0,1 151.55444566227678,87.49999999999997L138.5640646055102,79.99999999999997A160,160 0 0,0 9.796850830579018e-15,-160Z"></path> 
    <path class="active" fill="#aec7e8" d="M151.55444566227678,87.49999999999997A175,175 0 0,1 -151.55444566227675,87.50000000000006L-138.56406460551017,80.00000000000006A160,160 0 0,0 138.5640646055102,79.99999999999997Z"></path> 
    <path class="active" fill="#ff7f0e" d="M-151.55444566227675,87.50000000000006A175,175 0 0,1 -3.21459167878374e-14,-175L-2.9390552491737054e-14,-160A160,160 0 0,0 -138.56406460551017,80.00000000000006Z"></path> 
    </g> 
</svg> 

我可以做到以下几点：

$.each(path, function(i,elem) { 
    $(elem).parent('g').attr('class','active' + i); 
}); 

Answer 1

测试的代码： jsfiddle

$("g").each(function(i,elem) 
{ 

     $(elem).attr('class','class'+i); 

     $(elem).find("path").each(function(i,child) 
      { 
       $(child).attr('class','class'+i); 
      }); 

}); 

Answer 2

您正在尝试使用$.each。这将适用于数组[]。根据文档，

泛型迭代器函数，可用于无缝遍历对象和数组。 具有长度属性（例如函数的参数对象）的数组和类似数组的对象通过数字索引进行迭代，从0到length-1。其他对象通过它们的命名属性进行迭代。

对于DOM元素，您需要使用$("selector").each()。根据文档，

通过jQuery对象迭代，为每个匹配的元素执行一个函数。

多：

的$。每个（）函数是不一样的$（选择器）。每个（），其被用于迭代，排他地，在jQuery对象。

所以，你一定要做到这样：

$("path").each(function(i) { 
    $(this).attr("class","yourClass").parent('g').attr('class','active' + i); 
}); 

访问当前元素，你需要使用$(this)。