如何在jquery mobile中动态创建列表时创建自动列表分隔符

Question

我已动态创建了一个消息列表.我有一个<ul>标签,我正在动态生成一个列表.但是,我不知道如何添加列表分隔符.我可以调用js中的刷新方法,在我列出之后会添加分隔符吗？

这就是我所拥有的:

<ul id="messages" data-autodividers="true" data-role="listview" data-theme="c">

    //a list of <li> are dynamically generated here

</ul>

这只会将列表分隔符附加到最顶层,我需要在<li>标记内部使用其中的几个.我的列表<li>是消息.我希望能够按日期分割,这样可以更容易使用.

Answer 1

我有一个jsfiddle http://jsfiddle.net/yVtVE/2/

代码有点不同但它的工作原理

假设这样的列表

<ul data-role="listview" id="MessagesList" data-autodividers="true">
                <li date="2013-03-20"><a href="#">Event 1</a></li>
                <li date="2013-03-20"><a href="#">Event 2</a></li>
                <li date="2013-03-19"><a href="#">Event 3</a></li>
           </ul>

你的代码就是

$("#MessagesList").listview({
            autodividers: true,
            autodividersSelector: function (li) {
                var out = li.attr('date');
                return out;
            }
        }).listview('refresh');

原版的

来自JQM文档http://api.jquerymobile.com/listview/

Autodividers

列表视图可以配置为自动为其项目生成分隔符.这是通过向任何列表视图添加data-autodividers ="true"属性来完成的.

默认情况下,用于创建分隔符的文本是项目文本的大写首字母.或者,您可以通过以编程方式在listview上设置autodividersSelector选项来指定分隔符文本.例如,要将自定义选择器添加到id ="mylistview"的元素:

$( "#mylistview" ).listview({
autodividers: true,
// the selector function is passed a <li> element from the listview;
// it should return the appropriate divider text for that <li>
// element as a string
autodividersSelector: function ( li ) {
var out = /* generate a string based on the content of li */;
return out;
}
});

假设你的消息中有一个日期,你的代码会像这样工作

$( "#mylistview" ).listview({
autodividers: true,
autodividersSelector: function ( li ) {
    var re = /\/\d{4}\/\d{2}\/\d{2}/i;
    var out = $(this).html().match(re);
    return out;
  }
});

我没有测试过这段代码,它可能有bug,但它会给你一个尝试的想法.