【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'));

参考:

コメント