將類添加到父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)。