質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

630閲覧

forEachをfor文に直す方法について

oyatsu8

総合スコア97

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/11/25 11:57

forEachをfor文に直す方法について

https://teratail.com/questions/160151 の続きの質問になるのですが、
もし教えて頂いた下記のコードが少し古いブラウザではエラーが起こることがわかり、
を古い書き方に直したいと思ったのですが、(とても格好良いコードを書いて頂いたのですが、、自分が使っている環境(Mac OS 10.8)の一つではうまく動かず(新しいPCではChromeで動きました)、いろいろ勉強が足りず申し訳ありませんがアドバイスいただけないでしょうか、、

  • ボタンをクリックしたときのエラー

javascript

1index.html:49 Uncaught TypeError: $li.forEach is not a function
  • 元となるコード

javascript

1const $li = document.querySelectorAll( '#sw>li' ); 2document.querySelector( '#sw' ).onclick = e => { 3 if ( e.target === e.currentTarget ) return; 4 let item = e.target.closest( 'li' ); 5 $li.forEach( n => n.classList[ item === n ? 'add' : 'remove' ]( 'mizu' ) ); 6};
  • 修正しようとしたコード

javascript

1const $li = document.querySelectorAll( '#sw>li' ); 2document.querySelector( '#sw' ).onclick = e => { 3 if ( e.target === e.currentTarget ) return; 4 let item = e.target.closest( 'li' ); 5 6 for(var i=0;i<$li.length;i++){ 7 function($li[i]){return $li[i].classList[item === n ? 'add':'remove']('mizu')} 8 } 9};
  • コード全体

javascript,html

1<!DOCTYPE html> 2<html lang='ja'> 3<head> 4<meta http-equiv="Content-Type" content="application/javascript; charset=utf-8"/> 5<style type="text/css"> 6 .mizu{ 7 background: #9FF; 8 } 9</style> 10 11<meta name="viewport" content="width=device-width, initial-scale=1"> 12 <title>setIntervalテスト</title> 13 <script src="js/jquery-3.3.1.min.js"></script> 14</head> 15 16<body> 17 <ul id="sw"> 18 <li id="sw01" class="mizu"> 19 テスト01 20 </li> 21 <li id="sw02"> 22 テスト02 23 </li> 24 <li id="sw03"> 25 テスト03 26 </li> 27 </ul> 28<div id="textPlace"></div> 29 30<script type="text/javascript"> 31var on_no = '1'; 32var txt01 = "1"; 33const $li = document.querySelectorAll('#sw>li'); 34document.querySelector('#sw').onclick = e => { 35 if(e.target === e.currentTarget) return; 36 let item = e.target.closest('li'); 37 on_id = item.getAttribute("id"); 38 if(on_id == 'sw01'){ 39 on_no = '1'; 40 }else if(on_id == 'sw02'){ 41 on_no = '2'; 42 }else if(on_id == 'sw03'){ 43 on_no = '3'; 44 } 45 setTime_a(); 46console.log("item:",item);/*itemには丸ごと入っている <li id="sw02">テスト02</li>*/ 47 $li.forEach(n => n.classList[item === n ? 'add':'remove']('mizu')); 48}; 49 50txt01 = document.getElementById("textPlace"); 51txt01.innerHTML = on_no + "を表示"; 52setTime_a(); 53 54// 以前の timeoutID を保持する変数 55var prev_timeout_id = null 56function setTime_a(){ 57 // timeout がすでに設定されている場合取り消す。 58 if (prev_timeout_id != null){//もしprev_timeout_idが空でなければ 59 clearTimeout(prev_timeout_id);/*prev_timeout_idをclearTimeoutする*/ 60 console.log("clearTimeout しました。"); 61 } 62 // timeoutID を保存 63 prev_timeout_id = setTimeout(function(){ 64 txt01.innerHTML = on_no + "を終了"; 65 },3000); 66 txt01.innerHTML = on_no + "を表示"; 67} 68 69console.log("prev_timeout_id",prev_timeout_id); 70 71</script> 72</body> 73</html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

forで回す中身は、functionにする必要はありません。{}の中にそのまま書いてください。

javascript

1 for(var i=0;i<$li.length;i++){ 2 $li[i].classList[item === n ? 'add':'remove']('mizu'); 3 }

なお、querySelectorAllの結果にforEachがないのに対応する手段として、Arrayのメソッドを借りてくる方法もあります。

javascript

1[].forEach.call($li, n => n.classList[ item === n ? 'add' : 'remove' ]( 'mizu' ) );

投稿2018/11/25 12:55

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

oyatsu8

2018/11/25 16:34

ありがとうございます。どちらも動きました!Arrayのメソッドさえもよく知らなかったので勉強しようと思います。
guest

0

古いブラウザやIEではNodeList.prototype.forEach()メソッドがないので、
一旦配列に変換してArray.prototype.forEach()メソッドを利用します。

JavaScript

1$li.forEach(/* 省略 */); 2 3Array.prototype.slice.call($li).forEach(/* 省略 */);

投稿2018/11/25 12:54

NozomuIkuta

総合スコア1260

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

oyatsu8

2018/11/25 16:32

ありがとうございます!forとifばかり使っていて、forEach()というものに慣れておらず、今から勉強しようと思います。
NozomuIkuta

2018/11/26 01:05

解決したようでよかったです。 「配列に含まれているものを1つづつ何かしたい」というのはよくある処理なので、「高階関数」などで調べて見てください。`forEach()`はじめ他にも便利なものがあります。
oyatsu8

2018/11/27 11:53

forEach()ようやく意味がわかってきました。実際かいて、何が入ってるか確かめないと理解できなかったです。丁寧に教えていただきありがとうございました。
NozomuIkuta

2018/11/27 13:40

参考になったのであれば幸いです。 高階関数は、関数呼び出しの分オーバーヘッドがありますが、よほど処理を高速化しなければいけない場面でなければ、メリットの方が大きいですので、いろいろ活用してみてみるといい思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問