3

リスト要素のコレクションと色のコレクションをループするコードがあります。各リスト要素が色に指定されていることを確認します。

モジュラス演算子を除いて、これに関するすべてを理解しています。残りの数を見つけて使用していることがわかりますが、ここで何をしているのか一生理解できませんか?

var li = document.getElementsByTagName('li');
var colors = ["salmon", "teal", "orange", "grey", "blue"];
var colorsCount = colors.length;

for ( var i = 0; i < li.length; i++ ) {
    li[i].style.backgroundColor = colors[ i % colorsCount  ]; // why does this work?
}
4

8 に答える 8

0

それはあなたの色を循環させています。限られた数の色と可能なリスト項目の数しかないため、配列iの境界をオーバーフローしないようにします。colors

于 2013-09-10T21:42:34.933 に答える
0

モジュラス演算子は、除算の余りを返します。色を付けるリスト内の要素よりも配列内の色が少ない可能性がある場合でも、色配列をループして再利用できます。

長さが8だとすると、

5 % 1 == (5 / 1) = 0 remainder 1
5 % 2 == (5 / 2) = 0 remainder 2
5 % 3 == (5 / 3) = 0 remainder 3
5 % 4 == (5 / 4) = 0 remainder 4
5 % 5 == (5 / 5) = 1 remainder 0
5 % 6 == (5 / 6) = 1 remainder 1
5 % 8 == (5 / 7) = 1 remainder 2
5 % 7 == (5 / 8) = 1 remainder 3

ご覧のとおり、剰余は mod 演算子によって返されたものであり、常に色配列の長さよりも小さくなっています。

于 2013-09-10T21:44:11.040 に答える
0

なぜ機能i % colorsCountするのですか？

機能

このコードは を循環しcolorsます。モジュラス演算子を使用して、常に配列の境界内にいることを確認します。

それはどのように行うのですか

剰余演算は、ある数値を別の数値で割った余りを求めます。

あなたの場合、iモジュラスを取ることによってcolorsCount：

0 % 5; // 0
1 % 5; // 1
1 % 5; // 2
3 % 5; // 3
4 % 5; // 4
5 % 5; // 0
8 % 5; // 3
于 2013-09-10T21:44:13.833 に答える
0

モジュラス演算の結果は、左のオペランドを右のオペランドで割った余りです。

したがって、問題のコード行は常に 0 から colorsCount-1 の間の数値を返します。

于 2013-09-10T21:44:20.553 に答える