我已经在google和stackoverflow上进行了大量搜索，但没有找到任何解决方案。
我正在动态创建嵌套的可折叠项，并且在最里面的层中有一个列表视图。我的可折叠程序正在变得明显但不是列表。 与stackoverflow上的其他问题相比，这是diff，因为在从字符串解析接收到的json时生成多级层次结构。 请查看代码并帮助我设置列表元素的样式。
<div data-role="page" id="pageone">
<div data-role="header">
<h1>My items</h1>
</div>
<div data-role="main" class="ui-content">
<div data-role = "collapsible-set" id="set">
<div>
使用Javascript：
<script>
var commodity;
var variety;
var grade;
var content;
var text;
var xmlhttp;
var jsons ='[{"Turmeric":[{"Bulb":["Grade 2","Grade 1"]},{"Finger":["Grade 1"]}]}]';
console.log(jsons);
var data = $.parseJSON(jsons);
var nextId = 0;
$.each(data, function(key, value){
$.each(value, function(key, value){ //Runs for each commodity
commodity = key;
var data1 = value;
$(document).on("pageinit", function() {
nextId++;
content = "<div data-role='collapsible' data-collapsed-icon='arrow-r' data-expanded-icon='arrow-d' id='setk'><h3> " + commodity + "</h3><p>";
$.each(data1, function(key, value){
$.each(value, function(key, value){
variety = key;
content = content + "<div data-role='collapsible' data-collapsed-icon='arrow-r' and data-expanded-icon='arrow-d' id='setk'><h3> " + variety + "</h3><p>"+
'<ul data-role="listview" id="noth">';
for(var i=0, len=value.length; i < len; i++){
grade = value[i];
content=content+'<li><a href="ext.html" rel="external">'+grade+'</a></li>';
}
content = content + '</ul>';
content = content + "</p></div>";
});
});
content = content +"</p></div>";
$("#set").append( content );//.collapsibleset('refresh');
$("#set").enhanceWithin();
});
});
});
</script>
答案 0 :(得分：2)
工作示例：http://jsfiddle.net/eL9qL/
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<!--<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>-->
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="index" data-theme="a" >
<div data-role="header">
<h3>
First Page
</h3>
<a href="#second" class="ui-btn-right">Next</a>
</div>
<div data-role="content">
<div data-role = "collapsible-set" id="set">
<div>
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
<div data-role="page" id="second" data-theme="a" >
<div data-role="header">
<h3>
Second Page
</h3>
<a href="#index" class="ui-btn-left">Back</a>
</div>
<div data-role="content">
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
var commodity;
var variety;
var grade;
var content;
var text;
var xmlhttp;
var jsons ='[{"Turmeric":[{"Bulb":["Grade 2","Grade 1"]},{"Finger":["Grade 1"]}]}]';
console.log(jsons);
var data = $.parseJSON(jsons);
var nextId = 0;
$.each(data, function(key, value){
$.each(value, function(key, value){ //Runs for each commodity
commodity = key;
var data1 = value;
$(document).on("pageinit", function() {
nextId++;
content = "<div data-role='collapsible' data-collapsed-icon='arrow-r' data-expanded-icon='arrow-d' id='setk'><h3> " + commodity + "</h3><p>";
$.each(data1, function(key, value){
$.each(value, function(key, value){
variety = key;
content = content + "<div data-role='collapsible' data-collapsed-icon='arrow-r' and data-expanded-icon='arrow-d' id='setk'><h3> " + variety + "</h3><p>"+
'<ul data-role="listview" id="noth">';
for(var i=0, len=value.length; i < len; i++){
grade = value[i];
content=content+'<li><a href="ext.html" rel="external">'+grade+'</a></li>';
}
content = content + '</ul>';
content = content + "</p></div>";
});
});
content = content +"</p></div>";
$("#set").append( content );//.collapsibleset('refresh');
$("#set").enhanceWithin();
});
});
});
如果要正确增强内容，则应使用 .enhanceWithin（）; 功能。请记住，您使用的是两个不同的小部件，但您只能增强其中一个小部件。此功能将增强动态添加的所有内容。当然这个功能只适用于jQuery Mobile 1.4 +。如果您使用较旧的jQuery Mobile版本，请告诉我，我将进行必要的更改。