将类添加到自定义autodivider返回语句

Question

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

以下是我提出的代码：

$('#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;
}