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