Javascript Jquery移动复制自动分频器
我有一个列表,但当我试图为该列表生成自动除法器时,我得到了重复的除法器。以下是ul的代码和相关脚本:Javascript Jquery移动复制自动分频器,javascript,html,listview,jquery-mobile,Javascript,Html,Listview,Jquery Mobile,我有一个列表,但当我试图为该列表生成自动除法器时,我得到了重复的除法器。以下是ul的代码和相关脚本: <div data-role="content"> <ul data-role="listview" id="ScheduleList" data-autodividers="true"> <li time="3:30PM"><a href="#">Event 1</a></li>
<div data-role="content">
<ul data-role="listview" id="ScheduleList" data-autodividers="true">
<li time="3:30PM"><a href="#">Event 1</a></li>
<li time="3:30PM"><a href="#">Event 2</a></li>
<li time="4:30PM"><a href="#">Event 3</a></li>
<li time="3:30PM"><a href="#">Event 4</a></li>
<li time="3:30PM"><a href="#">Event 5</a></li>
<li time="4:30PM"><a href="#">Event 6</a></li>
</ul>
</div>
</div>
<script>
$(document).on("pageinit", "#ScheduleDay", function(){
$("#ScheduleList").listview({
autodividers: true,
autodividersSelector: function (li) {
var out = li.attr('time');
return out;
}
}).listview('refresh');
});
</script>
$(document).on(“pageinit”,“ScheduleDay”,function()){
$(“#计划列表”).listview({
自动分频器:正确,
自动分割选择器:功能(li){
var out=li.attr(“时间”);
返回;
}
}).listview(“刷新”);
});
以下是JSFIDLE中的代码:
我知道我可以在html中对列表项进行重新排序,这将消除重复的自动分割器,但是如果我让列表根据用户输入动态生成,那么我就无法手动对html进行重新排序
如果列表是动态生成的,有没有办法解决这个问题
谢谢。第一步,根据
数据时间
属性对列表项进行排序(我添加了数据以便于读取值-数据属性被用户代理忽略,因此不会弄乱代码)
我使用了下面的简单代码,但天才,由
更新:
感谢您提供排序li
元素的代码
var listview = $('#ScheduleList'),
listitems = listview.children('li');
listitems.detach().sort(function (a, b) {
var adata = $(a).data('time');
var bdata = $(b).data('time');
/* return (adata > bdata) ? (adata > bdata) ? 1 : 0 : -1; */
return (adata > bdata) ? 1 : -1;
});
listview.append(listitems);
第二步,动态应用自动除法器
$("#ScheduleList").listview({
autodividers: true,
autodividersSelector: function (li) {
var out = li.jqmData('time');
return out;
}
}).listview('refresh');
积分到和您需要首先对它们进行排序,然后应用自动除法器。但是我该如何做呢?在返回行(adata>bdata)中嵌套三元语句的目的是什么?(数据>数据)?1 : 0 : -1;@keirlavelle它用于在应用自动除法器之前对
li
元素进行排序。请查看我帖子中的链接,了解更多关于这段代码的详细信息。这行代码不会只返回1或-1吗?我只是不明白为什么你要比较adata>bdata两次?@keirlavelle我从另一个答案中得到了代码。我不擅长JS。你有更好的解决办法吗?我很乐意用它来更新我的答案:)肯定不是更好的解决方案,我已经对你的答案投了更高的票,因为我自己也用过:)但是返回行比较adata>bdata两次,如果第一次比较是真的,那么第二次也是真的,所以你可以删除第二个三元语句并让它读取return(adata>bdata)?1 : -1; - 为您保存两个字节的数据:p