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

Question

状況

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

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

質問

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

コード

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

$(function(){
  // 子要素のオブジェクトを取得
  var years = $('#years').children('div');

  // 子要素から西暦部分(上4桁)をsliceで抜き出してコンソールに表示する
  Object.keys(years).forEach(function(key){
    console.log(key + ':' + years[key].innerHTML);
    var year = years[key].innerHTML.slice(0, 4);
  });
});

コンソールの出力結果

Answer 1

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

$(function(){
  // 子要素のオブジェクトを取得
  var years = $('#years').children('div');

  // 子要素から西暦部分(上4桁)をsliceで抜き出してコンソールに表示する
  years.each(function(key, elem){
    console.log(key + ':' + elem.innerHTML);
    var year = elem.innerHTML.slice(0, 4);
  });
});

Comments

[AkihiroIshii]

早速のご回答ありがとうございます。ご提示いただいたコードに書き換えて無事にエラーが消えました。

ご指摘いただいて気付きましたが、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オブジェクトについて理解が深まりました。感謝です。

Answer 2

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