なぜあまりが0になるとJSが動作するのか？

2023/08/16 18:22

このQ&Aのポイント

このコードはJavaScriptで、HTMLの要素の背景色を交互に変えるものです。
あまりが0になるとは、iの値が偶数であることを意味します。
このコードでは、ul要素の子要素のうち、奇数番目のli要素の背景色をグレーに変えています。

ベストアンサー

javascriptに関する質問です。

2012/08/29 22:20

このコードを簡単に説明してください。なぜあまりが0になると、JSが動作するのかがわかりません。（child childrenのあたりも自分の頭がごちゃごちゃしています）よろしくお願いします。 <html> <head> <title>Hello DOM !</title> </head> <body> <div id="wrap"> <ul class="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </div> <script type="text/javascript"> var children = document.querySelector("#wrap .list").children; for(var i=0;i<children.length;i++){ var child = children[i]; if(i%2){ child.style.backgroundColor = "#EEEEEE"; } } </script> </body> </html>

kanako20123
お礼率16% (2/12)

JavaScript
回答数4
ありがとう数1

みんなの回答 （4）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

babu_baboo
ベストアンサー率51% (268/525)

2012/08/31 13:43 回答No.4

> document.querySelector("#wrap .list"). > ここまでは理解できるのですが、 querySelector は、１つのHTML要素を返す。 querySelectorAll は、複数のHTML要素をノードリストととして返す。（JSの配列と似ているがそうではない） querySelector で返されたノード(ul要素)には、子ノード（今回はli要素）が１０個存在する。 querySelector で得られた要素に .childNodes (.children) を付加することで、その”子ノードリスト”を得られる。その得られた子ノード群にまとめて背景色を設定できる命令はない(*1)ので、1個づつ　変数 child に代入して色をつける。 *1:ブラウザが対応していれば、スタイルシートにルールを設定すればできる

質問者

お礼 2012/09/23 08:46

皆さんありがとうございました。評価の方が遅くなってしまい申し訳ありませんでした。また是非教えてください。

質問者

補足 2012/09/23 08:44

ありがとうございます。質問引っ張りすぎで申し訳ないのですが、＞＞childNodes (.children) を付加することで・・・・・ここを聞こうかと思ったのですが、書いているうちなんとなくわかりました。

その他の回答 (3)

babu_baboo
ベストアンサー率51% (268/525)

2012/08/30 11:10 回答No.3

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"; }); というか、スクリプトを使うまでもなくスタイルシートで…

質問者

補足 2012/08/30 13:01

みなさんありがとうございます。 document.querySelector("#wrap .list"). ここまでは理解できるのですが、この後、childrenとしてvar childとするのはなぜですか。変数の宣言の仕方とか、なぜ宣言するのかとか、基本的なところがよくわかりません。初心者です!すみません。よろしくお願いします。

luka3
ベストアンサー率74% (293/394)

2012/08/30 08:31 回答No.2

簡単にいうと、１行おきに行の色を変える、ということですね。 i%2 で i を 2 で割った余りを求めていますが、２で割った余りは０か１しかなく、i が１ずつ増加するので０と１が交互に発生することになります。このあまりが１の時だけ（iが奇数の時） child.style.backgroundColor = "#EEEEEE"; が実行される（＝動作する？）ということです。

神崎渉瑠（@taloo）
ベストアンサー率44% (1016/2281)

2012/08/30 01:07 回答No.1

＞なぜあまりが0になると、JSが動作するのかがわかりません。確認させてください。どういう状態になったら「動作している」と判断され、どういう状態になったら「動作していない」と判断されたのですか？

関連するQ&A

DOM の要素の数え方について
同じクラス名のついた、子要素の数え方を回答いただければと思います。 1. li タグが 5つあるので、そのような出力にしたいのです。 2. 各 ul の li タグの数を出すには、どのようにすればよいのでしょうか ? どうぞ、皆様よろしくおねがいいたいします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> </head> <body> <ul class="myClass"> <li>1</li> <li>2</li> </ul> <ul class="myClass"> <li>3</li> <li>4</li> <li>5</li> </ul> <script> try { var chiledNodes = []; function userFunc( parent ) { chiledNodes = document.querySelector( parent ).children; alert ( chiledNodes.length ); } } catch( e ) { alert( e ); } userFunc( '.myClass' ); </script> </body> </html>
- ベストアンサー
- JavaScript
JavaScript多重ループを使ったHTML生成
JavaScriptで以下のようなHTMLを生成したいと考えています。 <li>を任意の数で繰り返し処理して生成し、さらにそれを任意の数で繰り返し処理して生成した<ul>に紐づけるようにしたいと考えています。 <div id="index"> <ul> 　　<li><div></div></li> 　　<li><div></div></li> 　　<li><div></div></li> 　　↓ 　　<li>任意の数で繰り返し </ul> <ul> 　　<li><div></div></li> 　　<li><div></div></li> 　　<li><div></div></li> 　　↓ 　　<li>任意の数で繰り返し </ul> ↓ <ul>任意の数で繰り返し </div> 以下のようなスクリプトをjQueryを使って書いてみましたが、うまくできませんでした。アドバイスいただけると大変助かります。よろしくお願いいたします。 (function(x, y) { 　　var i = 0, j = 0, x = x, y = y; 　　var index = $("#index"); 　　　　while(j < y) { 　　　　　　var ul = $("<ul>"); 　　　　　　ul.appendTo(index); 　　　　　　while(i < x) { 　　　　　　　　var li = $("<li>"); 　　　　　　　　var div = $("<div>"); 　　　　　　　　div.appendTo(li); 　　　　　　　　li.appendTo(ul); 　　　　　　　　i++; 　　　　　　} 　　　　j++; 　　　　} })(5, 5);
- 締切済み
- JavaScript
javascript バブルソート
javascriptでバブルソートの実装をしています。リストにある数値を取得して昇順 or 降順したいのですがうまくいきません。方法を教えていただけないでしょうか。よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <script type="text/javascript"> function bubbleSort(){ var liVal = document.getElementsByTagName("li"); var array = []; for(var i = 0; i < liVal.length; i++){ for(var j = 0; j < liVal.length-i-1; j++){ array[j] = parseInt(liVal[j].innerHTML); if(array[j] > array[j+1]){ var n = array[j]; array[j] = array[j+1]; array[j+1] = n; } } } } </script> </head> <body> <ul> <li>10</li> <li>5</li> <li>48</li> <li>22</li> <li>679</li> </ul> <p><a href="javascript:void(0);" onclick="bubbleSort()">ソート(降順)</a></p> </body> </html>
- 締切済み
- JavaScript
スクリプトで<div id="links">
下記スクリプトで<div id="links"></div>のところを開いた瞬間 <ul> <li><a href="http://foo.com/">foo</a></li> <li><a href="http://bar.com/">bar</a></li> </ul> に変換したいのですがうまくいきませんどこをどのように変更すれば変換されるのでしょうか【スクリプト】 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript"> var URL = new Array("http://foo.com/","http://bar.co.jp/"); var TITLE = new Array("foo","bar"); // 表示用コンテナ var container = document.getElementById('links'); // リセット container.innerHTML=''; var ul=document.createElement('ul'); container.appendChild(ul); for(var i=0;i<URL.length;i++){ var li=document.createElement('li'); var a=document.createElement('a'); // 'href'属性の設定 a.setAttribute('href',URL[i]); // ラベル a.appendChild(document.createTextNode(TITLE[i])); li.appendChild(a); ul.appendChild(li); } </script> </head> <body> <div id="links"></div> </body> </html>
- 締切済み
- AJAX
jQueryでプルダウンメニュー
jQueryでプルダウンメニューを作ろうと思いまして、とりあえず、リストにカーソルを合わせるとネストしたリストが表示されるようにしてみましたが、うまく動きません。どうしてでしょうか？ソースです↓ <!DOCTYPE HTML> <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"> </script> <script type="text/javascript"> google.load("jquery", "1"); </script> <script type="text/javascript"> $(function(){ $(ul li).hover( function(){ $(this).children(ul).show();}, function(){ $(this).children(ul).hide();} ); }); </script> </head> <body> <ul> <li>MENU <ul style="display:none;"> <li>sub-MENU1</li> <li>sub-MENU2</li> </ul> </li> </ul> </body> </html>
- ベストアンサー
- JavaScript
javascriptとhtmlでテーブル
あの、分からないことがあります。 <UL>を使って表示したリストを今度はテーブルに埋め込みたいのですがどのようにしたら良いでしょうか？strUniversityで貯めた文字列をテーブルのヘッダーにしてfor文でarray内の値をULで表示してそれぞれをそれぞれのセルに入れて一つのテーブルを作りたいのですが失敗ばかりしてしまいます。どのようにしたら良いでしょうか？宜しくお願いします。スクリーンショットとソースは以下に。 <HTML> <HEAD> <LINK href="global.css" rel="stylesheet" type="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"/> <title></title> </HEAD> <BODY> <script type="text/javascript"> document.title="Courses" //Print document title var strUniversity = "State University"; var arrCourses =new Array(5); arrCourses[0]="English"; arrCourses[1]="Music"; arrCourses[2]="Geography"; arrCourses[3]="Information Systems"; arrCourses[4]="Chemistry"; document.write(strUniversity.toUpperCase()+"<br/>"); for(i=0; i<5; i++) { document.write("<UL><LI>"+arrCourses[i]+"</LI></UL>"); } </script> </BODY> </HTML>
- ベストアンサー
- JavaScript
IEだけで動きません。Javascriptに関する質問です。
IEだけで動きません。Javascriptに関する質問です。初心者です。よろしくお願いします。下記のページを作りました。 menuをクリックすると、ページが現れるようにしています。aaa.jsで制御しています。ページの高さがそれぞれ違うので、bbb.jsで高さを取得しています。 IEでは、bbb.jsのwindow.parent.document.getElementById('obj')で「オブジェクトがありません」とエラーが出て、動きません。他のブラウザでは動きました。どうしてでしょう？悩んでいます。どなたか教えてください。よろしくお願いいたします。 <html> 　　<head> <link rel="stylesheet" type="text/css" href="main.css" media="screen,print" /> <script type="text/javascript" src="aaa.js"></script> 　　</head> <body> 　　<div id="container"> 　　</div> 　　　　　　<div id="menu"> 　　　<ul> 　　　<li><a href="javascript:changeObj('a.htm')" title="a">a</a></li> 　　　<li><a href="javascript:changeObj('b.htm')" title="b">b</a></li> 　　　<li><a href="javascript:changeObj('c.htm')" title="c">c</a></li> 　　　</ul> 　　</div> 　　　　</body> </html> ***aaa.js*** /* オブジェクトの変更 */ function changeObj(html){ var contents = '<object id="obj" data="' + html + '" type="text/html"><\/object>'; window.document.getElementById('container').innerHTML = contents; } ***main.css*** /* obj */ #obj{ visibility:hidden; position:absolute; right:5%; min-width:560px; background-color:#CCFFFF; z-index:1; border-style:none; overflow:visible; } ***a.htm*** <html> 　<head> <script type="text/javascript" src="bbb.js"></script> 　</head> 　　<body> <div id="page-height"> <div id="a"> </div> </div> 　　</body> </html>
- ベストアンサー
- JavaScript
javascriptとCSSを使ってのドロップダウンメニュー作成
CSSとJavaScriptを使ってドロップダウンメニューを作ろうと思っているのですが JavaScriptがうまく作動していないためか FireFoxでは表示されるのですが IE6では動きません。ご教授お願い致します。 ■index.html <head> <script src="javascript/menu.js" type="text/javascript"></script> </head> <div id="nav"> <ul> <li id="category"><a href="～">category</a> <ul> <li><a href="～">Overview</a></li> <li><a href="～">Overview</a></li> </ul> <ul> <li id="category"><a href="～">category</a> <ul> <li><a href="～">Overview</a></li> <li><a href="～">Overview</a></li> </ul> </div> ■menu.js function menuHover() {var menuItems = d.getElementById("nav").getElementsByTagName("li"); for (var i = 0, miL = menuItems.length; i < miL; i++) { menuItems[i].onmouseover = function() { this.className = "mnhover"; } menuItems[i].onmouseout = function() { this.className = ""; } window.onload = menuHover();
- 締切済み
- JavaScript
javascriptで質問
javascript初心者です。日付で自動的に変わるようなメニューが作りたいのですがもっとシンプルに簡潔にできますか？また、開いているページのタブの色を他と変えたいのですができますか？以下ソース↓ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>スクリプトテスト</title> <style type="text/css"> .menu li{ list-style-type:none; float:left; border:solid 1px #666666; } .menu li a{ padding:5px; background:#eeeeee; display:block; } .menu li a:hover{ background:#ffffff; } </style> <script type="text/javascript">  </script> </head> <body> <ul class="menu"> <script type="text/javascript">  </script> <script type="text/javascript">  </script> <script type="text/javascript">  </script> <script type="text/javascript">  </script> <script type="text/javascript">  </script> <script type="text/javascript">  </script> <script type="text/javascript">  </script> </ul> </body> </html>
- 締切済み
- JavaScript
付属画像がwebの表示画像ですが、その画像の赤い丸
付属画像がwebの表示画像ですが、その画像の赤い丸で囲ってあるように灰色のリストの右側の真ん中に３行ほど文字を入れたいです。コードは以下でです。回答よろしくお願いいたします。 <!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" /> <title></title> <style> * { margin : 0; padding : 0; -webkit-box-sizing : border-box; box-sizing : border-box; } .box { height : 56px; width : 100%; background-color : #0fd; } .wrap{ width : 100%; display : -webkit-box; display : -ms-flexbox; display : flex; -ms-flex-wrap : nowrap; flex-wrap : nowrap; padding-bottom : 30px; } .wrap .wrap_inner_left { width : 300px; } .wrap .wrap_inner_left ul { width : 300px; } .wrap .wrap_inner_left ul li { color : #444; list-style-type : none; width : 300px; height : 30px; line-height : 30px; padding-left : 20px; border-bottom : solid 1px #53535352; background-color : #f6f4f4; } .wrap .wrap_inner_left ul li:first-child { border-top : solid 1px #53535352; } .wrap .wrap_inner_right { width : 100%; } .wrap .wrap_inner_right img { width : 100%; } </style> </head> <body> <div class="box">正方形</div> <div class="wrap"> <div class="wrap_inner_left"> <ul> <li>使い方・マニュアル</li> <li></li> <li></li> <li>翻訳機能</li> <li>英語</li> <li>中国語</li> <li>スペイン語</li> <li>フランス語</li> <li>ロシア語</li> <li>アラビア語</li> <li>a</li> <li>a</li> <li>ヘルプ</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li> <li>f</li> <li>g</li> <li>h</li> <li>w</li> <li>s</li> <li>mmmm</li> <li>ログアウト</li> </ul> </div> <div class="wrap_inner_right"> <img src="https://placehold.jp/1794x400.png"> </div> </div> </body> </html>
- ベストアンサー
- CSS

なぜあまりが0になるとJSが動作するのか？

javascriptに関する質問です。