根據數組為文檔中的所有跨度設置不同的字體顏色？

Question

使用 JavaScript 我想從 colors 數組中更改每個<span>的樣式。 這是一個例子：

HTML：

        <span>H</span>
        <span>E</span>
        <span>L</span>
        <span>L</span>
        <span>O</span>

JS：

colors=['red', 'orange', 'yellow', 'blue','green'];
[...document.querySelectorAll('span')].map( sp => {
         sp.style.color = colors[0];
         colors.shift();
});

現在我目前的想法是擴展我的選擇並使用map以便我可以遍歷每個 object。 目前我正在刪除 colors 中正在使用的元素。 我還可以創建一個迭代器來跟蹤 colors，這樣它們就不會被刪除。 假設對象的數量和 colors 的數量相同，我也可以使用 for 循環單步執行並設置 colors。

我怎樣才能做到這一點？

Answer 1

因為map()返回一個新數組而您沒有使用它，所以forEach()將是這里更好的選擇。

您可以將forEach()中的箭頭 function 解析為map()當前元素，也可以作為可選但在這里非常有用的是當前元素的索引。 您可以將此索引用作 colors 數組的索引。

注意：這里不需要shift() ，所以我刪除了它。

這里沒有問，但很高興知道，當您的<span>元素多於 colors 時，您可以使用余數運算符%為其他元素賦予正確的顏色。 （再次從 colors 陣列的開頭開始）

 colors = ['red', 'orange', 'yellow', 'blue', 'green']; document.querySelectorAll('span').forEach((sp, ind) => { sp.style.color = colors[ind]; });

 <span>H</span> <span>E</span> <span>L</span> <span>L</span> <span>O</span>

Answer 2

正如您在問題中指出的那樣， shift()有效，但同時破壞了顏色數組。 此外， Array.prototype.map()返回一個您未使用的新數組，並且還要求您將NodeList轉換為數組。

要解決所有這些問題，您可以使用返回的NodeList提供的NodeList.prototype.forEach())方法來迭代列表，並使用傳遞的index訪問colors數組。

（在您的問題中， colors數組的長度和跨度數是相同的，但是如果spans數增加，則不會分配任何傳遞的 5 colors。要解決此問題，您可以使用余數 %循環遍歷數組傳遞索引colors[i % colors.length] )

 colors = ['red', 'orange', 'yellow', 'blue', 'green']; document.querySelectorAll('span').forEach((sp, i) => { sp.style.color = colors[i % colors.length]; });

 <span>H</span> <span>E</span> <span>L</span> <span>L</span> <span>O</span> <span>W</span> <span>O</span> <span>R</span> <span>L</span> <span>D</span>

正如tacoshy在評論中指出的那樣，您還可以通過 CSS 在:nth-child()偽類規則中使用功能符號來實現此目的。 有關更多討論，請參閱： Select CSS 中的每 N 個元素。

 span:nth-child(5n+1) { color: red; } span:nth-child(5n+2) { color: orange; } span:nth-child(5n+3) { color: yellow; } span:nth-child(5n+4) { color: blue; } span:nth-child(5n+5) { color: green; }

 <div class="container"> <span>H</span> <span>E</span> <span>L</span> <span>L</span> <span>O</span> <span>W</span> <span>O</span> <span>R</span> <span>L</span> <span>D</span> </div>