Javascriptで下記のようなコードを書いたのですが、実行すると、なぜか最後のJSONデータが2回クリ化してしまい、何故なのかわかりません。アドバイス頂けたら幸いです。
<!doctype html> <html lang="js"> <head> <meta charset="utf-8"> <title>CATリスト</title> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <link rel="stylesheet" href="css/form.css"> </head> <body> <!-- html --> <div class="div_cat"></div> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script> $(function(){ //JSONデータ var cat = {"cat_info": [ { "name": "ネコ", "prefecture": "北海道", }, { "name": "ネコ2", "prefecture": "秋田", }, { "name": "ネコ3", "prefecture": "青森", }, ]} //HTMLを初期化 $("div.div_cat").html(""); //HTMLを生成 for(var index in cat.cat_info){ $('<div class="div_cat">'+ cat.cat_info[index].name+cat.cat_info[index].prefecture +'</div>').appendTo('.div_cat'); } }); </script> </body> </html> ``` <!doctype html> <html lang="js"> <head> <meta charset="utf-8"> <title>CATリスト</title> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <link rel="stylesheet" href="css/form.css"> </head> <body> <!-- html --> <div class="div_cat"></div> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script> $(function(){ //JSONデータ var cat = {"cat_info": [ { "name": "ネコ", "prefecture": "北海道", }, { "name": "ネコ2", "prefecture": "秋田", }, { "name": "ネコ3", "prefecture": "青森", }, ]} //HTMLを初期化 $("div.div_cat").html(""); //HTMLを生成 for(var index in cat.cat_info){ $('<div class="div_cat">'+ cat.cat_info[index].name+cat.cat_info[index].prefecture +'</div>').appendTo('.div_cat'); } }); </script> </body> </html> ```
回答1件
あなたの回答
tips
プレビュー