使用CSS和JQuery显示列表的总数-UsingCSSandJQuerytodisplaytotalcountoflist

CSS, JQuery, and just started to build my first site.

CSS,JQuery,刚刚开始构建我的第一个站点。

I have a counter that counts the number of items in a list. The end result I'm working towards is to turn it into a notification badge/label and display it to the the user. It's functionality is exactly like the notification badges you get for your apps in iOS.

我有一个计数器,用于计算列表中的项目数。我正在努力的最终结果是将其变成通知徽章/标签并将其显示给用户。它的功能与您在iOS中的应用程序获得的通知标记完全相同。

The counter works fine and it displays the correct total of the list items the only problem is displaying it in the appropriate location. I want to display it right beside "Recent Updates" (screenshot), it currently only works when displayed at the end of the list - this makes sense since the code is read sequentially.

计数器工作正常,它显示列表项的正确总数,唯一的问题是在适当的位置显示它。我想在“最新更新”(屏幕截图)旁边显示它,它目前仅在列表末尾显示时才有效 - 这是有意义的,因为代码是按顺序读取的。

I looked at possibilities such as li:nth-last-child(1) but I don't know how to extract the counter value, every example I've seen uses it to highlight the element by changing the background color.

我查看了li:nth-​​last-child(1)之类的可能性,但我不知道如何提取计数器值,我见过的每个例子都使用它来通过改变背景颜色来突出显示元素。

This bring me to the question, would it possible to take the result of the counter value form CSS, store it a JS variable and then place it wherever I want within the body of the HTML doc?

这让我想到了这个问题,是否可以从CSS形式获取计数器值的结果,将其存储为JS变量,然后将其放在HTML文档正文中的任何位置?

If it's possible, how would I be able to do this? If not, what are my options?

如果可能的话,我怎么能这样做?如果没有,我的选择是什么?

CODE:

ul {
  counter-reset: item;
}
ul li {
  display: block;
  counter-increment: item;
}
.count:after {
  display: block;
  content: counter(item);
}

  
Recent Updates
15


  

    
04.15.2015 - ONE
    
04.15.2015 - TWO
    
01.24.2015 - THREE
    
04.15.2015 - FOUR
    
04.15.2015 - FIVE
    
01.24.2015 - SIX
    
04.15.2015 - SEVEN
    
04.15.2015 - EIGHT
    
01.24.2015 - NINE
    
04.15.2015 - TEN
    
04.15.2015 - ELEVEN
    
01.24.2015 - TWELVE
    
04.15.2015 - THIRTEEN
    
04.15.2015 - FOURTEEN
    
01.24.2015 - FIFTEEN
  

3 个解决方案

var count = $('ul.list-unstyled').children().length;

var count = $('ul.list-unstyled').children().length;

$('#result').text(count);

  

    
04.15.2015 - ONE
    
04.15.2015 - TWO
    
01.24.2015 - THREE
    
04.15.2015 - FOUR
    
04.15.2015 - FIVE
    
01.24.2015 - SIX
    
04.15.2015 - SEVEN
    
04.15.2015 - EIGHT
    
01.24.2015 - NINE
    
04.15.2015 - TEN
    
04.15.2015 - ELEVEN
    
01.24.2015 - TWELVE
    
04.15.2015 - THIRTEEN
    
04.15.2015 - FOURTEEN
    
01.24.2015 - FIFTEEN
  

   var count = $(".list-unstyled li").length;
    $('#count').html(count);

$(function(){
  $(".label-as-badge").html($(".space").length);  
});