将li数据汇总到分频器气泡

时间:2014-11-20 12:34:58

标签: jquery-mobile

是否有可能将数据量形成为相同类别的Li元素,并将em作为一个总和添加到具有相同类别的分隔符中。我试过SQLite,堆叠在双重执行上。我希望有办法解决这个问题。需要新鲜的眼睛。

<ul data-role="listview">
  <li data-role="list-divider" role="heading" class="ui-li-divider" data-category="">
     Category Not Set
     <span class="ui-li-count"></span>
  </li>
  <li data-row-id="1" data-amount="300" id="1" data-icon="info" data-category="">
     <a href="" data-view-id="1" class="viewCost ui-btn">
        <h2>Header 1</h2>
     </a>
  </li>
  <li data-row-id="2" data-amount="500" id="2" data-icon="info" data-category="">
     <a href="" data-view-id="2" class="viewCost ui-btn">
        <h2>Header 2</h2>
     </a>
  </li>
</ul>

1 个答案:

答案 0 :(得分:0)

使用 each() 功能迭代列表中的所有ui-li-dividers。然后,对于每个分隔符,您可以使用 nextUntil() 来获取兄弟列表项,直到到达下一个分隔符。获得此列表后,获取data-amount属性,将其解析为整数并添加它们。最后将计数气泡文本设置为总计:

$("#mylist .ui-li-divider").each(function(idx){
    var $bubble = $(this).find(".ui-li-count"); //the count bubble
    var total = 0;

    var $lis = $(this).nextUntil('.ui-li-divider'); //get listitems until next divider
    //iterate listitems, get the amount of each, add to total
    $lis.each(function(){
        var amount = parseInt($(this).jqmData('amount'));
        total += amount;
    });
    //write total to bubble
    $bubble.text(total);

});
  

<强> DEMO