- ベストアンサー
なぜあまりが0になるとJSが動作するのか？
- このコードはJavaScriptで、HTMLの要素の背景色を交互に変えるものです。
- あまりが0になるとは、iの値が偶数であることを意味します。
- このコードでは、ul要素の子要素のうち、奇数番目のli要素の背景色をグレーに変えています。
- kanako20123
- お礼率16% (2/12)
- JavaScript
- 回答数4
- ありがとう数1
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
> document.querySelector("#wrap .list"). > ここまでは理解できるのですが、 querySelector は、１つのHTML要素を返す。 querySelectorAll は、複数のHTML要素をノードリストととして返す。（JSの配列と似ているがそうではない） querySelector で返されたノード(ul要素)には、子ノード（今回はli要素）が１０個存在する。 querySelector で得られた要素に .childNodes (.children) を付加することで、その”子ノードリスト”を得られる。 その得られた子ノード群にまとめて背景色を設定できる命令はない(*1)ので、1個づつ 変数 child に代入して色をつける。 *1:ブラウザが対応していれば、スタイルシートにルールを設定すればできる
その他の回答 (3)
- babu_baboo
- ベストアンサー率51% (268/525)
if (評価) { ;} 評価は、０のときは false それ以外の数値は、true と判断される -- querySelector が使えるなら、querySelectorAll も使えるはず。 その提示されたサンプルでは、<ul>要素の子要素を全部選び、奇数のものに背景色を付けている なので、<li>要素の前後にテキストノードがあると判断するブラウザが有れば、正常に動かないかも？ なので、以下のようにする。（<li>要素の奇数番目を収集） ループの中に無駄な条件分岐の命令など不用になる var children = document.querySelectorAll("#wrap .list li:nth-of-type(even)"); for(var child, i = 0; child = children[i++];) { child.style.backgroundColor = "#EEEEEE"; } もしくは、 Array.prototype.forEach.call ( document.querySelectorAll("#wrap .list li:nth-of-type(even)"), function (e) { e.style.backgroundColor = "#EEEEEE"; }); というか、スクリプトを使うまでもなくスタイルシートで…
補足
みなさんありがとうございます。 document.querySelector("#wrap .list"). ここまでは理解できるのですが、 この後、childrenとしてvar childとするのはなぜですか。 変数の宣言の仕方とか、なぜ宣言するのかとか、基本的なところがよくわかりません。 初心者です!すみません。よろしくお願いします。
- luka3
- ベストアンサー率72% (424/583)
簡単にいうと、１行おきに行の色を変える、ということですね。 i%2 で i を 2 で割った余りを求めていますが、２で割った余りは０か１しかなく、i が１ずつ増加するので０と１が交互に発生することになります。 このあまりが１の時だけ（iが奇数の時） child.style.backgroundColor = "#EEEEEE"; が実行される（＝動作する？）ということです。
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
＞なぜあまりが0になると、JSが動作するのかがわかりません。 確認させてください。 どういう状態になったら「動作している」と判断され、 どういう状態になったら「動作していない」と判断されたのですか？
お礼
皆さんありがとうございました。評価の方が遅くなってしまい申し訳ありませんでした。また是非教えてください。
補足
ありがとうございます。質問引っ張りすぎで申し訳ないのですが、 ＞＞childNodes (.children) を付加することで・・・・・ ここを聞こうかと思ったのですが、書いているうちなんとなくわかりました。