我已阅读过this one之类的帖子，但这对我不起作用。
我在listview上列出数据。当我按下标题上的后退按钮重复该过程时，我想阻止append（）每次都保持添加相同的列表项。
我怎么能这样做？我使用过.html（）但是我在第二次尝试时失去了css。我将 $（'＃list'）。append（list_item）; 移到$ .each（....）之外，但它没有用。
$.each(vaga, function(index, item){
list_item = '<li class="widget uib_w_17" data-uib="jquery_mobile/listitem" data-ver="0" data-icon="carat-r" id="listitem"><a href="javascript:ViewItem('+item.ID+');"><span>'+item.CARGO+'</span></a></li>';
});
$('#list').append(list_item);
的index.html
<head>
<link rel="stylesheet" type="text/css" href="media_button_bar/css/media_button_bar.css">
<link rel="stylesheet" type="text/css" href="jqm/jquery.mobile-min.css">
<meta charset="UTF-8">
<title>Blank App Designer Cordova Web App Project Template</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" type="text/css" href="css/index_main.less.css" class="main-less">
<script src="cordova.js" id="xdkJScordova_"></script>
<script src="js/app.js"></script>
<!-- for your event code, see README and file comments for details -->
<script src="js/init-app.js"></script>
<!-- for your init code, see README and file comments for details -->
<script src="xdk/init-dev.js"></script>
<!-- normalizes device and document ready events, see file for details -->
<script type="application/javascript" src="lib/jquery.min.js"></script>
<script type="application/javascript" src="jqm/jquery.mobile-min.js" data-ver="0"></script>
<script type="application/javascript" src="js/index_user_scripts.js"></script>
<script type="application/javascript" src="xdk/ad/jqm_subpage.js"></script>
<script type="application/javascript" src="sidebar/js/hammer.js"></script>
<script type="application/javascript" src="sidebar/js/jquery.hammer.js"></script>
<script type="application/javascript" src="sidebar/js/swipe-hammer.js"></script>
<script type="application/javascript" src="sidebar/js/sidebar.js"></script>
</head>
<body>
<div class="upage" id="areapage" data-role="page">
<div class="upage-outer">
<div data-role="header" class="container-group inner-element uib_w_7" data-uib="jquery_mobile/header" data-ver="0" id="header_areas">
<h1>Header</h1>
<div class="widget-container wrapping-col single-centered"></div>
<div class="widget-container content-area horiz-area wrapping-col left"><a class="widget uib_w_25 d-margins" data-uib="jquery_mobile/button" data-ver="0" data-role="button" data-icon="bars" data-iconpos="notext" id="opensidebar_btn">Button</a>
</div>
<div class="widget-container content-area horiz-area wrapping-col right"></div>
</div>
<div class="upage-content ac0 content-area vertical-col left" id="page_74_57">
<div class="grid grid-pad urow uib_row_5 row-height-5" data-uib="layout/row" data-ver="0">
<div class="col uib_col_3 col-0_12-12" data-uib="layout/col" data-ver="0">
<div class="widget-container content-area vertical-col left">
<p style="font-style: italic; color: #246525;">Select by area</p>
<span class="uib_shim"></span>
</div>
</div>
<span class="uib_shim"></span>
</div>
<div class="grid grid-pad urow uib_row_7 row-height-7" data-uib="layout/row" data-ver="0">
<div class="col uib_col_5 col-0_12-12" data-uib="layout/col" data-ver="0">
<div class="widget-container content-area vertical-col left">
<div class="sbs-container widget uib_w_8 d-margins" data-uib="layout/side_by_side" data-ver="0">
<div class="leftContent widget-container">
<a class="uib-graphic-button default-graphic-sizing default-image-sizing hover-graphic-button active-graphic-button default-graphic-button default-graphic-text widget uib_w_10 d-margins media-button-text-bottom" data-uib="media/graphic_button" data-ver="0"
id="admin">
<img src="images/administrativa.png">
<span class="uib-caption">Admin</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- LIST PAGE -->
<div class="upage" id="listpage" data-role="page">
<div class="upage-outer">
<div data-role="header" class="container-group inner-element uib_w_15" data-uib="jquery_mobile/header" data-ver="0" id="header_listpage">
<h1>Header</h1>
<div class="widget-container wrapping-col single-centered"></div>
<div class="widget-container content-area horiz-area wrapping-col left"><a class="widget uib_w_18 d-margins" data-uib="jquery_mobile/button" data-ver="0" data-role="button" data-icon="arrow-l" data-iconpos="notext" id="listpage_back_btn" data-transition="fade">Button</a>
</div>
<div class="widget-container content-area horiz-area wrapping-col right"></div>
</div>
<div class="upage-content ac0 content-area vertical-col left" id="page_91_35">
<div class="widget uib_w_16 ui-content no_wrap outset-margin d-margins" data-uib="jquery_mobile/listview" data-ver="0" id="listview">
<ul data-role="listview" id="list">
<!-- list item appended in js -->
<!--<li class="widget uib_w_17" data-uib="jquery_mobile/listitem" data-ver="0" data-icon="carat-r" id="listitem"><a href="#"><span>Listitem</span></a>
</li>-->
</ul>
</div>
</div>
</div>
</div>
</body>
答案 0 :(得分：0)
清除循环外的列表，并像这样追加到内部
$('#list').html('');
$.each(vaga, function(index, item){
var list_item = '<li class="widget uib_w_17" data-uib="jquery_mobile/listitem" data-ver="0" data-icon="carat-r" id="listitem"><a href="javascript:ViewItem('+item.ID+');"><span>'+item.CARGO+'</span></a></li>';
$('#list').append(list_item);
});
样式问题似乎是由于框架无法对dom更改做出反应造成的，第一种样式应该正常工作，因为它是在处理数据之前发生的。您可以通过克隆处理数据时存在的样式化模板并将其调整为适合数据来解决此问题。
样品即将推出！
答案 1 :(得分：0)
从您引用的帖子中...更改选项以跨越
if($("li.widget span:contains('" + item.CARGO + "')").length == 0){
// append here
}
你的代码应该是
$.each(vaga, function(index, item){
if($("li.widget span:contains('" + item.CARGO + "')").length == 0){
list_item = '<li class="widget uib_w_17" data-uib="jquery_mobile/listitem" data-ver="0" data-icon="carat-r" id="listitem"><a href="javascript:ViewItem('+item.ID+');"><span>'+item.CARGO+'</span></a></li>';
$('#list').append(list_item);
}
});
答案 2 :(得分：0)
另一个解决方案是创建所有列表元素，然后附加结果，如下所示：
var list_item = "";
$.each(vaga, function(index, item){
list_item += '<li class="widget uib_w_17" data-uib="jquery_mobile/listitem" data-ver="0" data-icon="carat-r" id="listitem"><a href="javascript:ViewItem('+item.ID+');"><span>'+item.CARGO+'</span></a></li>';
});
$('#list').html(list_item);
这样，你只修改一次DOM，更好地修改我的性能。
答案 3 :(得分：0)
这似乎是一个框架问题。我从jquery更改为bootstrap，它可以正常工作。在所有内容之前清空列表并将其附加到$ .each（...）
中$("#list").empty();
...
$.each(vaga, function(index, item){
list_item = '<li id="listitem"><a href="javascript:ViewItem('+item.ID+');"><span>'+item.CARGO+'</span></a></li>';
$('#list').append(list_item);
});