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>
お礼
クロムを使ってみているのですが、「Ctrl + Shift + j」で 開発用のＷＥＢインスペクタが見れることが分かりました。 それを見てみると、 実際コーディングしているソースとは違うコードに変換されているのが見れたので、 クラスの変更の方法とかが分かりやすくできました。 ■ＨＴＭＬ部分 <div data-role="collapsible" class="collapsible" data-theme="f" data-content-theme="f"> <h3 class="iconbartitle">タイトル部分</h3> <ul class="title_naka_gray"> <a href=""><li>ああああああ</li></a> <a href=""><li>ああああああ</li></a> <a href=""><li>ああああああ</li></a> <a href=""><li>ああああああ</li></a> </ul> </div> ■ＣＳＳ部分 （プラスのマークの変更時） .iconbartitle .ui-icon-plus { background:url("../images/pc-icon_pink.png") no-repeat 0 5px !important; -webkit-background-size:13px 7px; background-size:13px 7px; -webkit-box-shadow:none; box-shadow:none; width:15px; height:15px; } （マイナスのマークの変更時） .iconbartitle .ui-icon-minus { background:url("../images/pc-icon_pink.png") no-repeat 0 5px !important; -webkit-background-size:13px 7px; background-size:13px 7px; -webkit-box-shadow:none; box-shadow:none; width:15px; height:15px; } ｊＱｕｅｒｙ Ｍｏｂｉｌｅをいじるのは初めてで 手間取っていましたが、これでいろいろいじれそうです！ ありがとうございました！
補足
ありがとうございます！ .ui-corner-top { border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } これを指定することで、 思い通り角丸を解除することが出来ました！ そして、以下の指定をすることで、 アイコンの位置を右側に持っていくことが出来ました！ .ui-btn-icon-left .ui-icon { border:2px #CC9900 solid; margin-left:85%; padding:0; background-color:#CCFF33; } ただ、今回指定したいところ以外にも上記のCSSが反映されてしまうため、 特定のクラスとかを指定したいなと思うのですが、 そのクラスの指定方法が分かりません。。 <div data-role="collapsible" class="collapsible" data-theme="f" data-content-theme="f"> <h3>タイトル部分</h3> <ul class="title_naka_gray"> <a href=""><li>ああああああ</li></a> <a href=""><li>ああああああ</li></a> <a href=""><li>ああああああ</li></a> <a href=""><li>ああああああ</li></a> </ul> </div> data-role="collapsible"の場合は、 data-theme="a～z" data-content-theme="a～z" しか指定できないので、 ここのテーマを変更したらいいんでしょうか。。 お手数ですが再度ご教授いただけると嬉しいです。 どうぞよろしくお願いいたします。