jqueryの$.getJSONの処理結果について
jqueryの$.getJSONの結果およびその違いについて教えてください。
以下の(1)と(2)の処理があり、(2)を(1)と同じ様に
出力したいと考えておりますが、(2)では(1)のように
「class="ui-li-static ui-body-inherit ui-first-child"」などが
設定されずに出力されてしまいます。
そのため、どのように記述すれば(1)と同じ結果になるのかを
ご教授いただけますでしょうか。
また、宜しければ(1)と(2)の処理の違いを
教えていただけると助かります。
※chrome バージョン 43.0.2357.81
apache-tomcat-7.0.53
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
(1)固定値で埋め込み
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
var test1 = function(){
$('#listviewtest').append('<li>1:aaaaaaa</li>');
$('#listviewtest').append('<li>2:bbbbbbb</li>');
$('#listviewtest').append('<li>3:ccccccc</li>');
};
$(document).on("pagebeforecreate", function() {
test1();
});
</script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="content">
<ul id="listviewtest" data-role="listview">
</ui>
</div>
</div>
</body>
</html>
処理結果
<ul id="listviewtest" data-role="listview" class="ui-listview">
<li class="ui-li-static ui-body-inherit ui-first-child">1:aaaaaaa</li>
<li class="ui-li-static ui-body-inherit">2:bbbbbbb</li>
<li class="ui-li-static ui-body-inherit ui-last-child">3:ccccccc</li>
</ul>
(2)$.getJSONで読み込み
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
var test1 = function(){
$.getJSON(
'test.js',
null,
function(data, status) {
var items = [];
$.each(data, function(key, val) {
items.push('<li>' + val.id + ':' + val.name + '</li>');
});
$('#listviewtest').append(items.join('')).trigger('create');
}
);
};
$(document).on("pagebeforecreate", function() {
test1();
});
</script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="content">
<ul id="listviewtest" data-role="listview">
</ul>
</div>
</div>
</body>
</html>
外部ファイル（test.js）
[
{"id":1,"name":"aaaaaaa"},
{"id":2,"name":"bbbbbbb"},
{"id":3,"name":"ccccccc"}
]
処理結果
<ul id="listviewtest" data-role="listview" class="ui-listview">
<li>1:aaaaaaa</li>
<li>2:bbbbbbb</li>
<li>3:ccccccc</li>
</ul>
お礼
ご回答ありがとうございます。 また、別の対処法をご丁寧に教えて頂きありがとうございます。 ブラウザからの値の形式に違いがあるというのは学んだはずでしたが、完全に忘れていました。 教えて頂いたalertで調べてみたところ、確かに返ってきている値は指定とは違う形式でした。 これでは、意図通りにプログラムが動かないのも納得です。 と、半分は思うのですが、もう半分は、別バージョン(1.3.2)のjQueryでは動くのにこのバージョン（1.7.1）では動かないと言う点に疑問が残ります。 あまりいいサンプルではないということなので（初心者に分かりやすいように敢えてこういう作り方をしているのだと思いますが）、fujillinがおっしゃられるように、いい方法を自分で理解できるよう学習を進めていこうと思います。