1

我需要遍历多个路径容器<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);
});
4

2 回答 2

1

测试代码： jsfiddle

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

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

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

});
于 2013-07-07T12:28:56.647 回答
1

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

通用迭代器函数，可用于无缝迭代对象和数组。具有长度属性的数组和类数组对象（例如函数的 arguments 对象）通过数字索引进行迭代，从 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).

于 2013-07-07T11:49:34.663 回答