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

Question

CSS、JQuery，并且刚刚开始构建我的第一个站点。

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

计数器工作正常，它显示正确的列表项总数，唯一的问题是在适当的位置显示它。我想将它显示在“最近更新”(screenshot)旁边，它目前仅在显示在列表末尾时才有效——这是有道理的，因为代码是按顺序读取的。

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

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

如果可能，我将如何做到这一点？ 如果没有，我有什么选择？

代码:

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

<div class="row item desktop description">
  <h3 class="margin-pull title-padding description">Recent Updates</h3><span class="label label-danger label-as-badge" style="font-size: 1em">15</span>
</div>
<div class="row scrollable kinetic margin-push-micro text-left count">
  <ul class="list-unstyled">
    <li class="space"><strong>04.15.2015</strong> - ONE</li>
    <li class="space"><strong>04.15.2015</strong> - TWO</li>
    <li class="space"><strong>01.24.2015</strong> - THREE</li>
    <li class="space"><strong>04.15.2015</strong> - FOUR</li>
    <li class="space"><strong>04.15.2015</strong> - FIVE</li>
    <li class="space"><strong>01.24.2015</strong> - SIX</li>
    <li class="space"><strong>04.15.2015</strong> - SEVEN</li>
    <li class="space"><strong>04.15.2015</strong> - EIGHT</li>
    <li class="space"><strong>01.24.2015</strong> - NINE</li>
    <li class="space"><strong>04.15.2015</strong> - TEN</li>
    <li class="space"><strong>04.15.2015</strong> - ELEVEN</li>
    <li class="space"><strong>01.24.2015</strong> - TWELVE</li>
    <li class="space"><strong>04.15.2015</strong> - THIRTEEN</li>
    <li class="space"><strong>04.15.2015</strong> - FOURTEEN</li>
    <li class="space"><strong>01.24.2015</strong> - FIFTEEN</li>
  </ul>
</div>

Answer 1

您根本不需要为此使用 CSS。 jQuery 通过其 length 属性公开集合中元素的数量，因此要计算列表项的数量，您只需:

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

---

演示

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row scrollable kinetic margin-push-micro text-left count">
  <ul class="list-unstyled">
    <li class="space"><strong>04.15.2015</strong> - ONE</li>
    <li class="space"><strong>04.15.2015</strong> - TWO</li>
    <li class="space"><strong>01.24.2015</strong> - THREE</li>
    <li class="space"><strong>04.15.2015</strong> - FOUR</li>
    <li class="space"><strong>04.15.2015</strong> - FIVE</li>
    <li class="space"><strong>01.24.2015</strong> - SIX</li>
    <li class="space"><strong>04.15.2015</strong> - SEVEN</li>
    <li class="space"><strong>04.15.2015</strong> - EIGHT</li>
    <li class="space"><strong>01.24.2015</strong> - NINE</li>
    <li class="space"><strong>04.15.2015</strong> - TEN</li>
    <li class="space"><strong>04.15.2015</strong> - ELEVEN</li>
    <li class="space"><strong>01.24.2015</strong> - TWELVE</li>
    <li class="space"><strong>04.15.2015</strong> - THIRTEEN</li>
    <li class="space"><strong>04.15.2015</strong> - FOURTEEN</li>
    <li class="space"><strong>01.24.2015</strong> - FIFTEEN</li>
  </ul>
</div>

<div id="result"></div>