🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
JavaScript

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

ループ

ループとは、プログラミングにおいて、条件に合致している間、複数回繰り返し実行される箇所や、その制御構造を指します

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

435閲覧

Object.keys().forEach でループ処理をする時に、オブジェクトの length も処理対象に含まれてしまう

AkihiroIshii

総合スコア67

JavaScript

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

ループ

ループとは、プログラミングにおいて、条件に合致している間、複数回繰り返し実行される箇所や、その制御構造を指します

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2019/12/18 08:24

状況

HTMLのdiv要素群をjQueryで取得し、Object.keys().forEachでループ処理をしたいです。具体的には、取得したdiv要素の一部をsliceで抜き出したいです。

試したところ、ループの最後でCannot read property 'slice' of undefinedというエラーが出てしまいました。コンソールの出力結果を見ると、div要素群だけでなく、要素群のlengthに対しても処理をしているように見えます。

質問

div要素のみ対象としたループ処理を行う方法はありますでしょうか?

コード

html

1<!-- (※)ループ対象とするbody部のみ記載します --> 2<div id="years"> 3 <div>2015(平成27年)</div> 4 <div>2016(平成28年)</div> 5 <div>2017(平成29年)</div> 6 <div>2018(平成30年)</div> 7 <div>2019(令和元年)</div> 8</div>

javascript

1$(function(){ 2 // 子要素のオブジェクトを取得 3 var years = $('#years').children('div'); 4 5 // 子要素から西暦部分(上4桁)をsliceで抜き出してコンソールに表示する 6 Object.keys(years).forEach(function(key){ 7 console.log(key + ':' + years[key].innerHTML); 8 var year = years[key].innerHTML.slice(0, 4); 9 }); 10});

コンソールの出力結果

イメージ説明

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

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

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

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

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

guest

回答2

0

ベストアンサー

jQueryオブジェクトなのですから、$.fn.eachリファレンス)を使うのが適当ではないかと思います。

javascript

1$(function(){ 2 // 子要素のオブジェクトを取得 3 var years = $('#years').children('div'); 4 5 // 子要素から西暦部分(上4桁)をsliceで抜き出してコンソールに表示する 6 years.each(function(key, elem){ 7 console.log(key + ':' + elem.innerHTML); 8 var year = elem.innerHTML.slice(0, 4); 9 }); 10});

投稿2019/12/18 08:31

maisumakun

総合スコア145975

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

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

AkihiroIshii

2019/12/18 08:45

早速のご回答ありがとうございます。ご提示いただいたコードに書き換えて無事にエラーが消えました。 ご指摘いただいて気付きましたが、DOM要素とjQueryオブジェクトを区別できていませんでした。。`Object.keys().forEach`を使うのであれば、jQueryオブジェクトではなくDOM要素とすべきだったんですね。試しにjQueryオブジェクトを`get()`でDOM要素に変換してもエラーを消すことができました。 ```javascript $(function(){ // 子要素のオブジェクトを取得 var years = $('#years').children('div').get(); //★ここでget()を追記 // 子要素から西暦部分(上4桁)をsliceで抜き出してコンソールに表示する Object.keys(years).forEach(function(key){ console.log(key + ':' + years[key].innerHTML); var year = years[key].innerHTML.slice(0, 4); }); }); ``` jQueryオブジェクトについて理解が深まりました。感謝です。
guest

0

javascript

1window.addEventListener('DOMContentLoaded', ()=>{ 2 var years=document.querySelectorAll('#years div'); 3 years.forEach((x,y)=>{ 4 console.log(`${y}:${x.textContent}`); 5 }); 6});

投稿2019/12/18 09:29

yambejp

総合スコア116694

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問