JS - getElementsByClassName方法數組，然後獲取元素數組

Question

我有幾個rects一個SVG腳本中：

<g class="1"> 
    <rect x="80.181" y="156.8" width="64.394" height="54.973"/> 
</g> 
<g class="2"> 
    <rect x="147.067" y="156.8" width="23.89" height="54.973"/> 
</g> 
<g class="1"> 
    <rect x="173.45" y="156.8" width="22.433" height="54.973"/> 
</g> 
<g class="3"> 
    <rect x="198.375" y="156.8" width="39.668" height="54.973"/> 
</g> 

(...) 

我想創建一個定義內部類的所有rects的填充，例如功能，1.類似於：

function FillRect() { 
    var rect = document.getElementsByClassName('1'); 

    for (var i = 0; i < rect.length; i++) { 
     document.rect[i].querySelector('rect').style.fill="blue"; 
    } 
} 

我不知道如何做最後的document.rect[i].querySelector部分。

Answer 1

你可以簡單地做：

var rect = document.querySelectorAll(".1 rect"); 
for (var i = 0; i < rect.length; i++) { 
    rect[i].style.fill="blue"; 
} 

Answer 2

你並不需要參考文檔對象。

function FillRect() { 
    var rect = document.getElementsByClassName('1'); 

    for (var i = 0; i < rect.length; i++) { 
     rect[i].querySelector('rect').style.fill="blue"; 
    } 
} 

Answer 3

函數FillRect（）{ VAR RECT = document.getElementsByClassName（ '1'）;

for (var i = 0; i < rect.length; i++) { 
    rect[i].getElementsByTagName('rect').style.fill="blue"; 
}} 

這應該做你想做的。如果你願意，你可以考慮jQuery。