前提・実現したいこと
JavaScript(jQuery)でjsonデータを読み込み、htmlにあるデータをclass要素すべてに挿入するプログラムを作りたいと考えております。
getJSONを用いて#wrapper内が以下のようになるプログラムにしたいです。
<div id="wrapper"> <div class="class"> <li> <a href="#">こんにちは</a> </li> </div> <div class="class"> <li> <a href="#">こんにちは</a> </li> </div> <div class="class"> <li> <a href="#">こんにちは</a> </li> </div> </div>JS/jQueryどちらも初心者です。
至らぬ点が多々ありますが、原因と解決・改善方法ご教授頂けましたら幸いです。
発生している問題・エラーメッセージ
同じclassでありながら一番下の要素のみにループの個数だけデータが挿入されている。
以下が生成後の#wrapper内のコードです。
該当のソースコード
#HTML(index.html)
<!DOCTYPE html> <html lag="ja"> <head> <meta charset="utf-8"> <script src="./js/vendor/jquery-3.3.1.js"></script> <script src="js/main.js"></script> </head> <body> <main> <div id="wrapper"> <div class="class"></div> <div class="class"></div> <div class="class"></div> </div> </main> </body> </html>#JavaScript(js/main.js)
$(function() {
function a () {
$('.class').each(function() {
$Container = $(this);
$.getJSON('./data/content.json', function (data) { var itemHTML, items = []; $.each(data, function(i, item) { itemHTML = '<li>' + '<a href="#">' + item.comment + '</a>' + '</li>'; items.push($(itemHTML).get(0)); }); $Container.append(items); }); });
}
a();
});
#JSON(data/content.json)
[
{
"comment" : "こんにちは"
}
]
試したこと
getJSONなしでは
<div class="class"> <li> <a href="#">こんにちは</a> </li> </div> が3つできるのは確認しました。補足情報(FW/ツールのバージョンなど)
ブラウザ:firefox
エディタ:atom
回答1件
あなたの回答
tips
プレビュー