jQuery undefined is not an object

Question

以下のJSコードを実行すると表題のエラーが返されます。
コード内で使用しているcloning()の返り値は以下です。

<div class="hotel">
<div class="hotelpics">
<div class="image"></div>
</div>
<div class="hotelinfo">
<h2 class="hotelname"></h2>
<div class="tags"></div>
<div class="rating"></div>
<div class="price"></div>
</div>
</div>

このタグに値を埋め込みappend()をしてHTMLの情報を変更するプログラムです。

(evaluating 'hotelClones[index].find')

実行すると上記のように返ってくるので、JSコード内のhotelClonesの配列の使い方、変数宣言等が使い方が間違えていると思うのですがどう修正すれば良いですか。

          var hotelClones = [];
          var hotelName = null;
          var hotelImage = null;
          var tags = [];
          var rate = null;
          var price = null;

          $.each(hotels, function(index, hotel) {
            hotelClones = [];
            hotelClones.push(cloning());
            hotelName = hotel.hotel_name;
            hotelClones[index].find('.hotelname').append(hotelName);
            $.each(hotelpics, function(index, hotelpic) {
              if (hotel.hotel_id === hotelpic.hotel_id) {
                hotelImage = hotelpic.pic;
                hotelClones[index].find('.image').append(hotelImage);
              }
            });

            tags = [];
            $.each(hoteltags, function(index, hoteltag) {
              if (hotel.hotel_id === hoteltag.hotel_id) {
                console.log(hotel.hotel_id + hoteltag.tag);
                tags.push(hoteltag.tag);
              }
            });

            for (var i = 0; i < tags.length; i++) {
              hotelClones[index].find('.tags').append('<span>' + tags[i]);
            }
            price = hotel.price;
            rate = hotel.rate;
            hotelClones[index].find('.price').append('<span>' + price);
            hotelClones[index].find('.rating').append('<span>' + rate);
            $(".rating span").addClass("rate");
            $('.hotels').empty();

            for (var i = 0; i < hotelClones.length; i++) {
              $('.hotels').append(hotelClones[i]);
            }
          });

Comments

[yu-smc]

まずはご自身でconsole.log等使ってデバッグしてみて、どこかで値が想定と違うものになっていないか確かめてみてください。質問文のままだと丸投げの質問として低評価つけられてしまうかもです。

[m.ts10806]

この方丸投げしかないですよ。前から。

[Lhankor_Mhy]

エラーはどこで発生していますか？
わからないようでしたら、エラーメッセージをそのままご提示ください。

[Chandler_Bing]

エラーメッセージは
TypeError: undefined is not an object (evaluating 'hotelClones[index].find')
です

[Lhankor_Mhy]

cloning() の返り値は文字列、という理解でいいのですか？

[Chandler_Bing]

各場所を変更すると上手く行きましたが、新たな問題が発生したので後で編集いたします。

[Lhankor_Mhy]

それと、hotels が未定義ですが、これには何が入っているのですか？

[Lhankor_Mhy]

これは、アレか、質問者が問題を解決して質問を編集していくのを追いかけるゲームか。

[Chandler_Bing]

Lhankor_Mh様。いつもありがとうございます。
この問題に関しては
$.each(hotels, function(index, hotel) {
hotelClones = [];
hotelClones.push(cloning());
hotelName = hotel.hotel_name;
hotelClones[index].find('.hotelname').append(hotelName);
$.each(hotelpics, function(index, hotelpic) {
if (hotel.hotel_id === hotelpic.hotel_id) {
hotelImage = hotelpic.pic;
hotelClones[index].find('.image').append(hotelImage);
}
});
のhotelClones = [];を削除すれば解決しました。

Answer 1

          $.each(hotels, function(index, hotel) {
            //hotelClones = [];ここをコメントアウトにすると解決
            hotelClones.push(cloning());
            hotelName = hotel.hotel_name;
            hotelClones[index].find('.hotelname').append(hotelName);
            $.each(hotelpics, function(index, hotelpic) {
              if (hotel.hotel_id === hotelpic.hotel_id) {
                hotelImage = hotelpic.pic;
                hotelClones[index].find('.image').append(hotelImage);
              }
            });

コード

Comments

[Chandler_Bing]

追記、
また一番外側のeachの最後で、
hotelClones = [];で初期化します。