jQueryのemptyの挙動

以下の構造をしたHTMLを使用したJSについて質問です。

HTML
1<!DOCTYPE html>
2<html lang="en" dir="ltr">
3<head>
4  <meta charset="utf-8">
5  <title>Sample</title>
6  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
7</head>
8<body>
9  <main>
10    <div class="container">
11
12      <div class="lookup">
13      </div>
14　　　　<!--hotelsの中に複数のhotelを入れ込んでいく-->
15      <div class="hotels">
16        <!--イベント設定-->
17        <div class="mainrequirements">
18          <span id="sortbyprice" class="selected">料金の低い順</span><span id="sortbyrating" class="">高評価</span><span id="recommended" class="">おすすめ</span>
19        </div>
20
21        <div class="hotel">
22          <div class="hotelpics">
23            <div class="mainpic">
24            <!--imgタグで画像-->
25            </div>
26            <div class="others">
27            <!--imgタグで画像3枚-->
28            </div>
29          </div>
30          <div class="hotelinfo">
31            <h2 class="hotelname"><!--名前--></h2>
32            <div class="tags">
33            <!--spanタグ複数-->
34            </div>
35            <div class="rating">
36            <!--spanタグ1つ-->
37            </div>
38            <div class="price">
39            <!--spanタグ1つ-->
40            </div>
41          </div>
42          <div class="clear"></div>
43        </div>
44        <div class="clear"></div>
45      </div>
46    </div>
47  </main>
48</body>
49</html>

JS
1  $(function() {
2    var array = [];
3    var hotels = [];
4    var hotelpics = [];
5    var hoteltags = [];
6    var hotelFrame = null;
7
8    function cloning() {
9      var hotel = $('.hotel').eq(0).clone();
10      var hotelpics = hotel.children().eq(0); //hotelpics
11      var hotelinfo = hotel.children().eq(1); //hotelinfo
12      var hotelpics_children = hotelpics.children(); //image
13      var hotelinfo_children = hotelinfo.children(); //hotelname,tags,ratings,price
14
15      //配列でtext("")をすると上に参照(text("")をしないと文字が残ったままに)
16      var array = [hotel, hotelpics, hotelinfo, hotelpics_children, hotelinfo_children];
17      for (var i = 0; i < array.length; i++) {
18        array[i].text("");
19      }
20      // for (var i=0; i<array.length; i++) {
21      //  console.log(array[i]);
22      // }
23      hotelpics.append(hotelpics_children);
24      hotelinfo.append(hotelinfo_children);
25
26      hotelFrame = hotel.append(hotelpics, hotelinfo);
27      // console.log(hotelFrame);
28      return hotelFrame;
29    }
30
31    // 関数からは$.postの結果をreturnする
32    function pics() {
33      return $.post('ajax.php', {
34        word: word,
35        kind: 'pics'
36      });
37    };
38
39    function tags() {
40      return $.post('ajax.php', {
41        word: word,
42        kind: 'tags'
43      });
44    };
45
46    $('#sortbyprice').on('click', function() {
47      var erase = $('.hotel');
48      $.post('ajax.php', {
49        word: word,
50        kind: 'hotels'
51      }, function(result) {
52        hotels = result;
53        pics().done(function(result) {
54          hotelpics = result;
55        });
56        tags().done(function(result) {
57          hoteltags = result;
58
59          console.log(hotels);
60          console.log(hotelpics);
61          console.log(hoteltags);
62
63          var hotelClones = [];
64          var hotelName = null;
65          var hotelMainPic = null;
66          var others1 = null;
67          var others2 = null;
68          var others3 = null;
69          var tags = [];
70          var rate = null;
71          var price = null;
72
73          $.each(hotels, function(index, hotel) {
74            hotelClones.push(cloning());
75
76            hotelName = hotel.hotel_name;
77            hotelClones[index].find('.hotelname').append(hotelName);
78
79            tags = [];
80            $.each(hoteltags, function(index, hoteltag) {
81              if (hotel.hotel_id === hoteltag.hotel_id) {
82                tags.push(hoteltag.tag);
83                console.log(hoteltag.tag);
84              }
85            });
86
87            for (var i = 0; i < tags.length; i++) {
88              hotelClones[index].find('.tags').append('<span>' + tags[i]);
89            }
90
91            price = hotel.price + '/1泊(1人)';
92            rate = 8.5;
93            hotelClones[index].find('.price').append('<span>' + price);
94            hotelClones[index].find('.rating').append('<span>' + rate);
95
96
97            $.each(hotelpics, function(index, hotelpic) {
98              if (hotel.hotel_id === hotelpic.hotel_id) {
99                hotelMainPic = '<img' + ' src' + '="' + 'imgs/' + hotelpic.main_pic + '">';
100                hotel = '<img' + ' src' + '="' + 'imgs/' + hotelpic.main_pic + '">';
101                others1 = '<img' + ' src' + '="' + 'imgs/' + hotelpic.others1 + '">';
102                others2 = '<img' + ' src' + '="' + 'imgs/' + hotelpic.others2 + '">';
103                others3 = '<img' + ' src' + '="' + 'imgs/' + hotelpic.others3 + '">';
104                hotelClones[index].find('.mainpic').append(hotelMainPic);
105                hotelClones[index].find('.others').append(hotelMainPic);
106                hotelClones[index].find('.others').append(hotelMainPic);
107                hotelClones[index].find('.others').append(hotelMainPic);
108              }
109            });
110
111            hotelClones[index].append('<div class="clear">');
112            hotelClones[index].find('.rating span').addClass("rate");
113            hotelClones[index].find('.mainpic img').height(300).width(300);
114            hotelClones[index].find('.others img').height(85).width(85);
115　　　　　　　//このemptyが問題
116            erase.empty();//イベントの先頭にある変数erase
117            for (var i = 0; i < hotelClones.length; i++) {
118              $('.hotel').append(hotelClones[i]);
119              console.log(hotelClones[i]);
120            }
121          });
122          hotelClones = [];
123
124        });
125      });
126      return false;
127    });
128  });
129

このJSを使用してHTMLを変化させます。また最初にHTMLに飛んで来た段階では既に、画面にホテルが表示されています。
このJS内のcloningメソッドは以下を返します(最初のHTMLと同じ構造で中身が空です)。ここにAjax,PHPを使用して得た配列を埋め込み
最初のHTMLに挿入します。(配列を取得し、このタグに埋め込むところまでは問題なし)

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

★問題
タグに配列を埋め込み表示中のHTMLに埋め込む際、表示中の物を全て削除したいのでerase.empty()をすると
JSの最後のこの部分がからになります。erase.empty()が問題ですが、とにかく今表示されている、htmlクラスhotelを消し、新たに埋め込みたのですが、空になっていて何も表示されません。erase.empty();の後に下記コードを書くのに何故消えてしまうのですか。

JS
1for (var i = 0; i < hotelClones.length; i++) {
2              $('.hotel').append(hotelClones[i]);
3              console.log(hotelClones[i]);
4            }

m.ts10806

2019/02/15 20:13

jQueryn なんてものはないので正確に記述願います。いずれにしてもバグだらけですけど。

Lhankor_Mhy

2019/02/16 01:09

erase には何が入っているのですか？

Chandler_Bing

2019/02/16 02:29

erase ＝ $(.'hotel') になってます。

Lhankor_Mhy

2019/02/16 02:37

「このJS内のcloningメソッドは以下を返します」とありますが、jQueryオブジェクトを返す、という理解でいいですか？また、そのDOM要素はdocumentに配置されていますか？

Chandler_Bing

2019/02/16 02:43

はい。jQueryオブジェクトを返すはずです。 $(function({ cloningメソッドイベント }) となってます。

Lhankor_Mhy

2019/02/16 02:58

わかりにくい質問だったようですみません。 cloning() が返すjQueryオブジェクトは、document上の $('.hotel')と同じものですか？また、同様に、erase に入っている $(.'hotel') と同じものですか？

Chandler_Bing

2019/02/16 03:01

ありがとうございます。はい、cloningは$('.hotel.')を取得し、そこからtext("")等を使用し、空で構造が同じものを作ります。またeraseにも同様の$('.hotel')が入っております。

Lhankor_Mhy

2019/02/16 03:05

同じものが入っているなら、erase.empty() で消えてしまうのは当然かと思います。関数名から、クローンしているのかと思っていたのですが、違うのですか？

Lhankor_Mhy

2019/02/16 03:09

おっと、すみません、cloning関数のコードご提示いただいてたんですね、読んでみます。

Chandler_Bing

2019/02/16 03:13

よろしくお願いします。

Chandler_Bing

2019/02/16 03:52

また、$(.hotel)を使用した理由は今後、HTMLに修正(タグの追加など)があった場合に便利かなと思っただけです。

Lhankor_Mhy

2019/02/16 03:59

うーん、再現しない…… erase を取得している部分のコードはご提示いただけますか？

Chandler_Bing

2019/02/16 04:35

$('#sortbyprice').on('click', function()のすぐ下にございます。

m.ts10806

2019/02/16 05:04

jQueryn なんてものはないので正確に記述願います。

m.ts10806

2019/02/16 05:04

jQueryn なんてものはないので正確に記述願います。

m.ts10806

2019/02/16 05:05

三回くらい言えば伝わりますかね。いずれにしてもバグだらけですが。

Lhankor_Mhy

2019/02/16 05:25

補足ありがとうございます。やはり再現しないんですよね。 console.log(hotelClones[i]);の出力が空になっている、ということなんですよね？

Chandler_Bing

2019/02/16 05:45

ありがとうございます。そうです。空になります。

m.ts10806

2019/02/16 06:00

jQueryn なんてものはないので正確に記述願います。 (４回目) 他のかたも存在しないものについてわざわざ拾ってアドバイスは不要かと思います。

Lhankor_Mhy

2019/02/16 06:17

空、というのは、undefined である、ということですか？

Chandler_Bing

2019/02/16 06:41

いいえ違います。最初のコードで示した。返り値になります。つまりは、最初のコードで示した返り値に値を埋め込むけれど、 emptyをするこたとによって中身が空になります。(結果的に返り値と同じになる。) ということです。

Lhankor_Mhy

2019/02/16 06:57

ん？では、「中身が空」とは具体的にはどういうことですか？

Chandler_Bing

2019/02/16 07:17 編集

簡単な例をだします。 <div class＝sample> </div> が、cloningよる返り値だとします。そしてajaxや配列の操作でここに値を挿入し、いかのようになったとします。 <div class＝sample> <div>blah hotel</div> </div> そしてemptyをするこにより返り値が <div class＝sample> <div>blah hotel</div> </div> でなく、 <div class＝sample> </div> のように、中身が消えて、cloningで取得したものだけが残ってしまいます。

Lhankor_Mhy

2019/02/16 07:21

それはどのようにして確認したのですか？

Chandler_Bing

2019/02/16 07:23

cnsole.logで確認しました。 emptyをするを実行する直前までは欲しい値が全て入っていることも確認しました。

Lhankor_Mhy

2019/02/16 07:40

つまり、 console.log(hotelClones[i]); では、中身がなくなって <div class="hotel"></div> だけが返ってきたということですか？

Chandler_Bing

2019/02/16 08:21

そういう事でございます。