JavaScriptのhtml挿入について

お世話になっております。

すみません、少々急ぎです、、！
表題について行き詰まっている箇所があります。
現在wordpressでサイト制作をしており、ajaxを利用して絞り込み検索の機能を実装しています。

一通り検索機能、そして表示するまで一連の流れはできたのですが(要リファクタリング)、
表示のさせ方、つまりhtmlの出力のされ方でつまづいています。

理想のhtml出力のされ方としては、

html
1<div class="service">
2  <div class="service__wrapper">
3    <img src="76d5ffefdf9.png" width="300px" height="auto">
4    <h3>サービス名 :
5      <a href="%bc%92/">
6        テストサービス２</a>
7    </h3>
8    <h4>説明 : </h4>
9    <p>テストサービス１テストサービス１テストサービス１テストサービス１テストサービス１テストサービス１テストサービス１テストサービス１テストサービス１テストサービス１</p>
10    <h4>視聴 : </h4>音楽データがありません<h4>価格 : </h4>40000円
11    <hr>
12  </div>
13  <div class="service__wrapper">
14    <img src="d5ffefdf9.png" width="300px" height="auto">
15    <h3>サービス名 :
16      <a href="8%e3%82%b5%e3%83%bc%e3%83%93%e3%82%b9%ef%bc%91/">
17        テストサービス１</a>
18    </h3>
19    <h4>説明 : </h4>
20    <p>テストサービス１テストサービス１テストサービス１テストサービス１テストサービス１テストサービス１テストサービス１テストサービス１テストサービス１テストサービス１</p>
21    <h4>視聴 : </h4>音楽データがありません<h4>価格 : </h4>40000円
22    <hr>
23  </div>
24</div>

というように、<div class="service">〜</div>の中に、2つに分けて<div class="service__wrapper">〜</div>を表示させたいですのですが、現実は

html
1<div class="service">
2  <div class="service__wrapper">
3    <img src="76d5ffefdf9.png" width="300px" height="auto">
4    <h3>サービス名 :
5      <a href="%bc%92/">
6        テストサービス２</a></h3><h4>説明 : </h4>
7    <p>テストサービス１テストサービス１テストサービス１テストサービス１テストサービス１テストサービス１テストサービス１テストサービス１テストサービス１テストサービス１</p>
8    <h4>視聴 : </h4>音楽データがありません<h4>価格 : </h4>40000円
9    <hr>
10    <img src="d5ffefdf9.png" width="300px" height="auto">
11    <h3>サービス名 :
12      <a href="8%e3%82%b5%e3%83%bc%e3%83%93%e3%82%b9%ef%bc%91/">
13        テストサービス１</a>
14    </h3>
15    <h4>説明 : </h4>
16    <p>テストサービス１テストサービス１テストサービス１テストサービス１テストサービス１テストサービス１テストサービス１テストサービス１テストサービス１テストサービス１</p>
17    <h4>視聴 : </h4>音楽データがありません<h4>価格 : </h4>40000円
18    <hr>
19  </div>
20</div>

となってしまいます、、。

以下がJavaScriptのソースコードです。ajaxのsuccessだけを記述します。

JavaScript
1					success : function( response ){
2						
3						loading.parentNode.removeChild( loading );
4						jsonData = JSON.parse( response );
5						
6						// div.box21を作成
7						var resultBox = document.createElement( "div" );
8						resultBox.className = "sng-box box21 box21-white";
9						var ren = jsonData.length;
10						var count = 0;
11						
12						if( ren == 0 ){
13							resultCnt.appendChild( resultBox );
14							resultBox.insertAdjacentHTML( "beforeend", "<li>検索結果がありません。</li>" );
15							
16						} else {
17							
18							// form作成
19							var f = document.createElement( "form" );
20							f.action = homeUrl + "/confirm";
21							f.method = "post"
22							
23							// input(hidden)作成
24							for( var i in select ){
25								var q = document.createElement( 'input' );
26								q.type = 'hidden';
27								q.name = "select";
28								q.value = select[ i ];
29								f.appendChild( q );
30							}
31							
32							resultCnt.appendChild( resultBox );
33							resultBox.appendChild( f );
34							
35							var cb1 = document.createElement( "div" );
36							var cb2 = document.createElement( "div" );
37							cb1.className = "service";
38							cb2.className = "service__wrapper";
39							
40							cb1.appendChild( cb2 );
41							
42							$.each( jsonData, function( i, val ){
43								
44								f.appendChild( cb1 );
45								
46								cb2.insertAdjacentHTML( "beforeend", "<img src='" + val[ 'serviceImg' ] + "' width='300px' height='auto'>" );
47								cb2.insertAdjacentHTML( "beforeend", "<h3>サービス名 : <a href=\"" + val[ 'permalink' ] + "\" > " + val[ 'post_title' ] + "</a></h3>" );
48								cb2.insertAdjacentHTML( "beforeend", "<h4>説明 : </h4>" + val[ 'serviceExplain' ] + "" );
49								cb2.insertAdjacentHTML( "beforeend", "<h4>視聴 : </h4>音楽データがありません" );
50								cb2.insertAdjacentHTML( "beforeend", "<h4>価格 : </h4>" + val[ 'servicePrice' ] + "円" );
51								cb2.insertAdjacentHTML( "beforeend", "<hr>" );
52								
53								count++;
54								if( ren === count ){
55									resultCnt.className = "fadeIn";
56								}
57								
58							} );
59						}
60						
61						click_flag = true;
62					},
63

ちなみに $.each( jsonData, function( i, val )以下を下記のように変更しても、同じ結果になります。

JavaScript
1	$.each( jsonData, function( i, val ){
2								
3								for( var i = 0; i < ren; i++ ){
4									
5									cb1.appendChild( cb2 );
6									
7									cb2.insertAdjacentHTML( "beforeend", "<img src='" + val[ 'serviceImg' ] + "' width='300px' height='auto'>" );
8									cb2.insertAdjacentHTML( "beforeend", "<h3>サービス名 : <a href=\"" + val[ 'permalink' ] + "\" > " + val[ 'post_title' ] + "</a></h3>" );
9									cb2.insertAdjacentHTML( "beforeend", "<h4>説明 : </h4>" + val[ 'serviceExplain' ] + "" );
10									cb2.insertAdjacentHTML( "beforeend", "<h4>視聴 : </h4>音楽データがありません" );
11									cb2.insertAdjacentHTML( "beforeend", "<h4>価格 : </h4>" + val[ 'servicePrice' ] + "円" );
12									cb2.insertAdjacentHTML( "beforeend", "<hr>" );
13									
14								}
15								
16								count++;
17								if( ren === count ){
18									resultCnt.className = "fadeIn";
19								}
20								
21							} );

最近ハマりすぎて心がポッキーの状態なので、溶けてなくなってしまいそうです。。

よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

each内に入れるべき処理とそうでない処理とがあるように見えます。

f.appendChild( cb1 );はeachより外側、

js
1var cb2 = document.createElement( "div" );
2cb2.className = "service__wrapper";

はeachより内側に入れてみてはどうでしょうか？

試してないのでうまくいかなかった時はすみません。。

またjQueryを使用されているのに、PureJSが混在しているのも少し気になりました。

無理にとは言いませんが、リファクタリングの際は学習を兼ねてjQueryでの処理に書き換えるとコードがすっきりするような気がします。

投稿2018/02/17 06:41

編集2018/02/17 06:43

namnium1125

総合スコア2043

退会済みユーザー

2018/02/17 07:10

できました！！色々と、eachの中に入れたり出したりして試していたのですが、この方法は試していなかったようです！！本当に助かりました。ありがとうございます！ちなみに、元々はこれらのコードは全てjQueryで書かれていたのですが、あまりjQueryはパフォーマンス面で好きでなくて意図的にpureJSに書き換えていたのです。確かに混在させると他のエンジニアが見辛いかもしれませんが、パフォーマンスとコードの見やすさを天秤にかけて１行ずつ書いているつもりでした！