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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

配列

配列は、各データの要素(値または変数)が連続的に並べられたデータ構造です。各配列は添え字(INDEX)で識別されています。

Q&A

3回答

1326閲覧

JavaScriptで繰り返しhtmlを生成したいが、コンテンツが上書きされてしまう

hideperon

総合スコア4

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

配列

配列は、各データの要素(値または変数)が連続的に並べられたデータ構造です。各配列は添え字(INDEX)で識別されています。

0グッド

0クリップ

投稿2019/11/08 08:26

実現したいこと

JavaScript初心者です。食べログでレストランが一覧で見れる(https://tabelog.com/kyoto/)のと同じように、共通構造がズラッと並んだページを1つ作りたいです。

前提

JQueryでhtml構造を生成しています。
MySQL等操作にはまだ手が出ないので、ひとまず同html内にある連想配列から要素を引っ張り出す流れにしたいです。

発生している問題・エラーメッセージ

for文でやろうとすると同じ構造は自動で作れるのですが、コンテンツが上書きされて全て同じ内容になってしまいます。

以下のソースコードで言うと、
html構造は要素の数だけ生成できるものの、その両方ともコンテンツが最終要素で上書きされてしまい、困っています。

該当のソースコード

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5</head> 6 7<div id='container'></div> 8 9<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script> 10<script> 11 var data = [{ 12 name: 'Aさん', 13 area: '京都', 14 },{ 15 name: 'Bさん', 16 area: '東京', 17 }]; 18 19 for (var i = 0; i < data.length; i++) { 20 21 $('#container').append($('<div/>').append($('<div/>').append('<h3>').append('<p>'))); 22 $('#container>div').addClass('farmers'); 23 $('.farmers div:nth-child(1)').addClass('info'); 24 $('.info h3:nth-child(1)').addClass('name').text(data[i]['name']); 25 $('.info p:nth-child(2)').addClass('area').text(data[i]['area']); 26 } 27</script> 28</body> 29</html>

どなたかご教示いただけると幸いです!

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

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

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

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

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

guest

回答3

0

こんな感じがスマートですかね・・

javascript

1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 2<script> 3$(function(){ 4 var data = [ 5 { name: 'Aさん', area: '京都',}, 6 { name: 'Bさん', area: '東京',}, 7 ]; 8 $('#container').append( 9 $.map(data,function(x){ 10 return $('<div>').addClass('farmers').append( 11 $('<div>').addClass('info').append( 12 $('<h3>').addClass('name').text(x.name), 13 $('<p>').addClass('area').text(x.area) 14 ) 15 ) 16 }) 17 ); 18}); 19</script> 20<div id='container'></div>

投稿2019/11/08 08:49

yambejp

総合スコア114572

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

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

0

こう書くかなぁ

HTML

1<body> 2 <div id="container"></div> 3 4 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 5 <script> 6 const data = [{ 7 name: 'Aさん', 8 area: '京都', 9 },{ 10 name: 'Bさん', 11 area: '東京', 12 }]; 13 14 $('#container').append($.map(data, ({name, area}) => $(` 15 <div class="farmers"> 16 <div class="info"> 17 <h3 class="name">${name}</h3> 18 <p class="area">${area}</p> 19 </div> 20 </div> 21 `))); 22 </script> 23</body>

投稿2019/11/08 12:46

shinji709

総合スコア805

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

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

0

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5</head> 6<body> 7<div id='container'></div> 8 9<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script> 10<script> 11 var data = [{ 12 name: 'Aさん', 13 area: '京都', 14 },{ 15 name: 'Bさん', 16 area: '東京', 17 }]; 18 19 $.each(data, function(i, row){ 20 $('<div>').addClass('farmers') 21 .append( 22 $('<div>').addClass('info').append( 23 $('<div>').addClass('name').text(row.name) 24 ).append( 25 $('<div>').addClass('area').text(row.area) 26 ) 27 ) 28 .appendTo($('#container')); 29 }); 30</script> 31</body> 32</html> 33

投稿2019/11/08 08:41

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問