【JQuery】Uncaught TypeError: xxx.find is not a function at yyyy.jsの原因と解決法

フロントエンド開発に慣れてなくて、JQueryの初歩的な部分ではまったのでメモです。

エラー

エラーを吐いたコードはこれです。

let elements = $('.g');

for(let i = 0; i < elements.length; i++) {
  console.log(elements[i].find('.LC20lb'));
}

実行すると、下記のようなエラーが出力されました。

Uncaught TypeError: elements[i].find is not a function
    at main.js:4

原因と解決法

変数elementsはJQueryのオブジェクトではなく、JavaScriptのオブジェクトであることが、このエラーの原因です。

なので、問題のこの部分を

  console.log(elements[i].find('.LC20lb'));

こうやってJQueryのオブジェクトに変換してやると、動くようになります。

  console.log($(elements[i]).find('.LC20lb'));

参考：

jQuery throws an error that element.find() is not a function

I have written a small JS to iterate through a set of matched elements and perform some task on each of them. Here is th...

stackoverflow.com