JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css">
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.js"></script>
<div data-role="page" id="jqmPaginationTest">
<div id="content" data-role="content">
<ul data-role="listview">
<li>
<a href="pages/nodeview.html">
<h3>Listview with multiple native count bubbles</h3>
<p>by bidbag</p>
<span class="ui-li-count old-content">Gaia</span>
<span class="ui-li-count new-content">Tartaros</span>
<span class="ui-li-count new-content">Chaos</span>
<span class="ui-li-count new-content">Nyx</span>
<span class="ui-li-count new-content">Eros</span>
</a>
</li>
<li>
<a href="pages/nodeview.html">
<h3>Splitted listview with multiple native count bubbles</h3>
<p>by bidbag</p>
<span class="ui-li-count old-content">2</span>
<span class="ui-li-count new-content">3</span>
<span class="ui-li-count new-content">5</span>
<span class="ui-li-count new-content">7</span>
<span class="ui-li-count new-content">11</span>
<span class="ui-li-count new-content">13</span>
<span class="ui-li-count new-content">17</span>
<span class="ui-li-count new-content">19</span>
<span class="ui-li-count new-content">23</span>
<span class="ui-li-count new-content">29</span>
<span class="ui-li-count new-content">31</span>
<span class="ui-li-count new-content">37</span>
</a>
<a href="pages/nodeview.html">
...
JavaScript
$(document).ready(function(){
{
$(".ui-li-has-count").each(function()
{
if($(this).find(".ui-li-count").length > 1)
{
var ln = $(this).find(".ui-li-count").length;
var master; var slave; var shift;
for (i=0; i<ln; i++) {
master = $(this).find(".ui-li-count:nth("+(i+1)+")");
slave = $(this).find(".ui-li-count:nth("+(i)+")");
shift = (slave.position().left - master.outerWidth() - 5);
master.css("left", shift).css("right","auto");
}
}
});
}
});