3

我有一个列表，但是当我尝试为该列表生成自动分隔符时，我得到了重复的分隔符。这是 ul 和相关脚本的代码：

<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>

这是 JSFiddle 中的代码：http: //jsfiddle.net/4fGT6/65/

我知道我可以重新排序 html 中的列表项，这样可以消除重复的自动分隔符，但是如果我使列表从用户输入动态生成，那么我无法手动重新排序 html。

如果列表是动态生成的，有没有办法解决这个问题？

谢谢。

4

1 回答 1

6

第一步，根据data-time属性对列表项进行排序（我添加了数据以方便读取值 -数据属性被用户代理忽略，因此它不会弄乱您的代码）。

我使用了以下由@undefined 编写的简单代码，但很天才。

更新：

感谢@Keir Lavelle审查排序元素的代码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');

演示

感谢@undefined和@Keir Lavelle

于 2013-10-08T11:17:17.113 回答