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

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

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

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

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

还有更多：

$ .each（）函数与$（selector）.each（）不同，后者用于独占于jQuery对象进行迭代。

所以，你必须这样做：

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

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

Answer 2

经测试的代码： jsfiddle

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

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

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

});

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

2 个答案: