質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

290閲覧

jQueryのapeendで値を挿入すると値が横に並ぶ

Chandler_Bing

総合スコア673

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1グッド

1クリップ

投稿2019/02/16 11:52

以下のような表示結果になるHTMLにPHPとJSを埋め込んだコードがあります。

★実現しようとしている事★
画像の'料金順で並べる'を押すとAjaxとPHPを使用し料金順で並んだホテルを取得し、それをJSの配列に挿入し既に表示されているホテル(貼り付けた画像)を削除し、JS配列を表示します。ちなみに料金順で並べた際取得するホテルは3つあります。そのホテルそれぞれが画像、タグ等を保持しています。

イメージ説明
★問題★
ホテルの情報や配列への埋め込みは成功しているのですが、3しかないホテルが9表示されてしまいます。
原因を模索していたところ、以下のJSコードのコメントアウトの部分で、問題を発見しました。

JS

1$(function() { 2 var array = []; 3 var hotel = null; 4 5 function hotelClone() { 6 var hotelpics = $("<div>", { 7 "class": "hotelpics" 8 }); 9 var mainpic = $("<div>", { 10 "class": "mainpic" 11 }); 12 var others = $("<div>", { 13 "class": "others" 14 }); 15 var hotelinfo = $("<div>", { 16 "class": "hotelinfo" 17 }); 18 var hotelname = $("<h2>", { 19 "class": "hotelname" 20 }); 21 var tags = $("<div>", { 22 "class": "tags" 23 }); 24 var rating = $("<div>", { 25 "class": "rating" 26 }); 27 var price = $("<div>", { 28 "class": "price" 29 }); 30 hotelpics.append(mainpic, others); 31 hotelinfo.append(hotelname, tags, rating, price); 32 hotel = hotelpics.add(hotelinfo) 33 return hotel; 34 }; 35 36 function pics() { 37 return $.post('ajax.php', { 38 word: word, 39 kind: 'pics' 40 }); 41 }; 42 function tags() { 43 return $.post('ajax.php', { 44 word: word, 45 kind: 'tags' 46 }); 47 }; 48 49 $('#sortbyprice').on('click', function() { 50 $('.hotel').empty(); 51 $.post('ajax.php', { 52 word: word, 53 kind: 'hotels' 54 }, function(result) { 55 hotels = result; 56 pics().done(function(result) { 57 hotelpics = result; 58 }); 59 tags().done(function(result) { 60 hoteltags = result; 61 62 var hotelsClone = [];//これから表示するホテルが入る 63 var hotelName = null; 64 var hotelMainPic = null; 65 var others1 = null; 66 var others2 = null; 67 var others3 = null; 68 var tags = []; 69 var rate = null; 70 var price = null; 71 72 $.each(hotels, function(hotelindx, hotel) { 73 hotelsClone.push(hotelClone()); 74 console.log(hotelClone()); 75 76 hotelName = hotel.hotel_name; 77 console.log(hotelName); 78 hotelsClone[hotelindx].find('.hotelname').append(hotelName); 79 80 tags = []; 81 $.each(hoteltags, function(index, hoteltag) { 82 if (hotel.hotel_id === hoteltag.hotel_id) { 83 tags.push(hoteltag.tag); 84 } 85 }); 86 87 for (var i = 0; i < tags.length; i++) { 88 hotelsClone[hotelindx].find('.tags').append('<span>' + tags[i]); 89 } 90 91 price = hotel.price + '/1泊(1人)'; 92 rate = 8.5; 93 hotelsClone[hotelindx].find('.price').append('<span>' + price); 94 hotelsClone[hotelindx].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 others1 = '<img' + ' src' + '="' + 'imgs/' + hotelpic.others1 + '">'; 101 others2 = '<img' + ' src' + '="' + 'imgs/' + hotelpic.others2 + '">'; 102 others3 = '<img' + ' src' + '="' + 'imgs/' + hotelpic.others3 + '">'; 103 hotelsClone[hotelindx].find('.mainpic').append(hotelMainPic); 104 hotelsClone[hotelindx].find('.others').append(others1); 105 hotelsClone[hotelindx].find('.others').append(others2); 106 hotelsClone[hotelindx].find('.others').append(others3); 107 console.log(hotelMainPic) 108 console.log(others1) 109 console.log(others2) 110 console.log(others3) 111 } 112 }); 113 114 hotelsClone[hotelindx].find('.rating span').addClass("rate"); 115 hotelsClone[hotelindx].find('.mainpic img').height(300).width(300); 116 hotelsClone[hotelindx].find('.others img').height(85).width(85); 117 }); 118 for (var i = 0; i < hotelsClone.length; i++) { 119 /*append([0]);の本来の形は 120 append(hotelsClone[1]);にして配列を全て表示する。 121 */ 122 $('.hotel').append([0]); 123 console.log([i]); 124 } 125 $('.hotel').append('<div class="clear">'); 126 hotelsClone = []; 127 }); 128 }); 129 return false; 130 }); 131}); 132

これを実行すると画像のようになります。(横に1が並んでいます)
CSSが問題と思い、CSSを削除して試して見ましたが、同じように横に並びます。JSのコードにこの様になってしまう原因はありますか。

イメージ説明

bochan2👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

cerfweb

2019/02/16 12:02

当該箇所のhtmlもご提示ください。
think49

2019/02/16 12:07

前質問とほぼ同様のコードですが、empty() の位置が変わっているようです。 https://teratail.com/questions/174677 問題個所が変わった場合は未解決質問を編集して適宜修正して下さい。 また、「ReferenceError: word is not defined」が未修正のようです。
guest

回答1

0

自己解決

タグの挿入場所が間違えておりました。

投稿2019/02/17 15:21

Chandler_Bing

総合スコア673

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問