将类添加到自定义 autodivider Return 语句

Question

我正在开发一个自定义自动分隔器，以根据发布日期划分帖子，并将评论计数包含在分隔符标题中。这些帖子目前按发布日期划分，并且我还包含评论计数，但我面临的问题是我希望将评论位设置为向右浮动，而日期保持在左侧。

下面是我想出的代码：

$('#postlist').listview({
  autodividers: true,
  autodividersSelector: function (li) {
    var out = li.find("p").map(function() {return $(this).text();});
    var datedivider = out.get(2);
    var countdivider = out.get(3);
  return [datedivider, countdivider];
 }
});

输出：红线是评论数，下面是console.log

如何在 return 语句中添加一个类或 id 以便我可以设置它的样式，或者有没有更好的方法在 listdivider 标题上添加评论计数。

HTML：

<div id="sbpage" data-role="page">
        <div data-role="header" data-position="fixed" data-theme="b" class="css-dd-header">
            <p class="css-dd-text">Latest Article</p>
            <a href="#home" data-icon="home" data-iconpos="notext" data-direction="reverse" data-transition="flow">Home</a>
            <a href="" data-icon="search" class="css-search" data-iconpos="notext" data-direction="reverse">Search</a>
        </div><!-- header -->
        <div data-role="content">
            <ul data-role="listview" data-theme="d" id="postlist" data-filter="true" data-filter-placeholder="Filter posts..."  data-autodividers="true" data-icon="false"> </ul><!-- content -->
        </div>
    </div><!-- page -->

Answer 1

我建议你使用jquery-mobile格式的内容http://view.jquerymobile.com/1.3.2/dist/demos/widgets/listviews/#list-formatted

所以你可以输入类似的东西，

<li data-role="list-divider">Friday, October 8, 2010 <span class="ui-li-count">2</span></li>

http://jsfiddle.net/eH4gq/

如果您需要进一步设置样式，您可以简单地使用 css 并选择其类值。

需要去掉data-autodividers="true"，输入如下，

<ul data-role="listview" 
    data-theme="d" 
    id="postlist" 
    data-filter="true" data-filter-placeholder="Filter posts..."   data-icon="false">
    <li data-role="list-divider">Friday, October 8, 2010 <span class="ui-li-count">2</span></li><!--content-->....

编辑

为了使用自定义自动分频器动态执行此操作，因为 ui-li-count 似乎没有被 autodividersSelector 处理 （据我在 jqm 代码中看到的），您可以正如其他人所建议的那样，将您需要的部分内容包装在 span 元素中。实现此目的的一种方法是在刷新列表视图并修改每个生成的分隔符的内容后在自定义事件上调用trigger。在接下来的代码中，您会注意到使用了一个特殊标记来分割分隔符文本的各个部分。例如，

http://jsfiddle.net/45Zwu/

js

$(document).on("pageinit", "#test", function () {

    $('#postlist').on("afterRefresh", function () {
        $(".ui-li-divider").each(function(){
            console.log($(this).text());
            var textSplit = $(this).text().split(",_#_");
            var countValue = textSplit[1];
            $(this).text(textSplit[0]);

            var count = document.createElement('span');
            $(count).addClass('comments-count').text(countValue);
            $(this).append(count);
        });
    });

    $('#postlist').listview({
        autodividers: true,
        autodividersSelector: function (li) {
            var out = li.text().substring(0, 1);
            var ranomNumber = Math.floor(Math.random() * 5) + 1;
            return [out, "_#_"+ranomNumber];
        }
    }).listview("refresh").trigger("afterRefresh");

});

html

<div id="test" data-role="page" data-theme="c">
    <div data-role="header">
         <h1>test</h1>

    </div>
    <div data-role="content">
        <ul id="postlist" data-role="listview" data-inset="true" data-autodividers="true">
            <li><a href="index.html">Adam Kinkaid</a>

            </li>
            <li><a href="index.html">Alex Wickerham</a>

            </li>
            <li><a href="index.html">Avery Johnson</a>

            </li>
            <li><a href="index.html">Bob Cabot</a>

            </li>
            <li><a href="index.html">Caleb Booth</a>

            </li>
            <li><a href="index.html">Christopher Adams</a>

            </li>
            <li><a href="index.html">Culver James</a>

            </li>
        </ul>
    </div>
</div>

css

.comments-count{
    float:right;
}