jQuery appendTo列表样式
jQuery appendTo list style
我对jQuery/HTML5有些陌生,所以遇到了一些问题。希望你能帮忙。
我正在加载一个本地json文件,并希望将其中的项添加到列表中。这很好用。但是,该列表没有使用jQuery样式?
我在没有加载json文件的情况下进行了尝试,而是将数据直接放在代码中,结果就成功了。我可能有什么问题?
以下是样式不正确的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tuBS Energie App</title>
<link href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.css" rel="stylesheet"/>
<link href="http://code.jquery.com/mobile/1.3.0/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<div id="tasksPage" data-role="page">
<div data-role="header" data-position="fixed">
<a href="#" data-role="button">Zurück</a>
<h1>tuBS Energie App</h1>
</div>
<div data-role="content">
<h3>Institut für Nachrichtentechnik</h3>
<ul id="taskList" data-role="listview" data-filter="true" data-filter-placeholder="Suche nach Institut..." data-inset="true"></ul>
</div>
<div data-role="footer" data-position="fixed">
<a href="#" data-role="button">Info</a>
</div>
</div>
<script type="text/javascript" charset="utf-8">
$(function()
{
$(document).ready(function(){
$.getJSON("institute.js",function(data) {
$.each(data.institute,function(i,el){
$("<li><a href='#'>"+el.id+". "+el.name+"</a> </li>").appendTo("#taskList");
});
});
});
})
</script>
</body>
</html>
这是给我正确样式的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tuBS Energie App</title>
<link href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.css" rel="stylesheet"/>
<link href="http://code.jquery.com/mobile/1.3.0/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<div id="tasksPage" data-role="page">
<div data-role="header" data-position="fixed">
<a href="#" data-role="button">Zurück</a>
<h1>tuBS Energie App</h1>
</div>
<div data-role="content">
<h3>Institut für Nachrichtentechnik</h3>
<ul id="taskList" data-role="listview" data-filter="true" data-filter-placeholder="Suche nach Institut..." data-inset="true"></ul>
</div>
<div data-role="footer" data-position="fixed">
<a href="#" data-role="button">Info</a>
</div>
</div>
<script type="text/javascript" charset="utf-8">
var institute_json =
[
{"id":"1","name":"Adaptronik und Funktionsintegration"},
{"id":"2","name":"Analysis und Algebra"},
{"id":"3","name":"Angewandte Mechanik"},
{"id":"4","name":"Angewandte Physik"},
{"id":"5","name":"Anorganische und Analytische Chemie"},
{"id":"6","name":"Architekturbezogene Kunst (IAK)"},
{"id":"7","name":"Automobilwirtschaft u Industrielle Produktion"},
];
$.each(institute_json,function(i,el)
{
$("<li><a href='#'>"+el.id+". "+el.name+"</a></li>").appendTo("#taskList");
});
</script>
</body>
</html>
当您将元素动态添加到列表视图时,渲染后需要刷新它。
$("ul").listview("refresh");
你能给我们介绍一下institute.js 的内容吗
试试这个:
$.getJSON("institute.js",function(data) {
$.each(data,function(i,el)
相关文章:
- 列表样式在IE中未设置为none,但在IE中适用
- 如何在ExtJs中获得将应用于给定类列表的样式
- CKEditor自定义样式下拉列表,带有预览但没有内联
- 如何更改列表中一个元素中的文本样式
- 记事本++ Javascript格式样式和变量列表
- 如何在Javascript中设置随机生成的项目列表的样式
- jQuery Mobile-过滤复选框的列表视图会导致出现无样式的复选框
- 单击隐藏列表样式
- 如何设置下拉列表项的样式
- jQuery-构建一个树样式列表
- 使用子项设置列表项的样式
- 如何在TinyMCE 4.0.10版本中使用importcss插件?(无法加载content_css并查看样式下拉列表)
- 更改复选框列表项样式
- KendoUi 列表视图“按下以加载更多”无法使用 MVVM 样式
- jQuery 使用两个下拉列表更改输入 css 样式
- 数据表:列显示在“显示/隐藏列”列表中,即使它具有“显示:无”样式
- 使用可动态查询样式化列表
- 设置内容样式包含字体系列、字体大小和颜色的可编辑列表 (
- )
- JavaScript获取当前应用于元素的样式列表
- 如何使用jQuery动态更新CSS样式列表