Add class to custom autodivider Return statement

Question

I am working on a custom autodivider to divide the posts based on post date and also include the comment counts in the divider header. The posts are currently been divided by the date it was posted and also I have the comment counts included but the issue I am facing is I want the comment bit to be set to float to the right while the date stays on left.

Below is the code I have come up with:

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

Output: The red line is the comment count and below it is the console.log

How do I add a class or id to the return statement so i can style it or is there a better way to add comment count on listdivider header.

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

I suggest you use jquery-mobile formatted content http://view.jquerymobile.com/1.3.2/dist/demos/widgets/listviews/#list-formatted

So you could enter something like,

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

http://jsfiddle.net/eH4gq/

and if you need to further style it, you can simply use css and select its class value.

You need to remove data-autodividers="true" and enter it as follows,

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

EDIT

In order to do this dynamically with a custom autodivider, since the ui-li-count does not seem to be handled by autodividersSelector (as far as i can see in jqm code) , you could wrap the part of content you require in a span element as others have suggested. One way to achieve this would be to call trigger on a custom event after refreshing the listview and modify the contents of each generated divider. In the code that follows you will notice that a special token has been used to split the parts of the divider's text. For example,

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