javascript - jQuery Bootstrap Facebook样式通知

我正在使用Bootstrap 3编写类似于Facebook的通知系统。
我正在使用带有下拉菜单类的bootstrap ul元素

<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-microphone"></i> Notifications</a>
          <ul class="dropdown-menu">
                        <li><a href="#"><span class="label label-primary">7:00 AM</span> Hi :)</a></li>
                        <li role="presentation" class="divider"></li>
                        <li><a href="#"><span class="label label-primary">8:00 AM</span> How are you?</a></li>
                        <li role="presentation" class="divider"></li>
                        <li><a href="#"><span class="label label-primary">9:00 AM</span> What are you doing?</a></li>
                        <li class="divider"></li>
                        <li><a href="#" class="text-center">View All</a></li>
          </ul>
          </li>

现在，li值只是硬编码。



我需要在UI上显示用户拥有的通知数量，就像facebook一样。请查看下面的示例图像，我需要显示通知数量，就像显示2和12一样。我不是一个精明的JavaScript程序员，我更是一个后端Java程序员。谁能在正确的方向上指导我如何实现这一目标？是否有任何引导插件或实现此目的的方法？我在网络上进行了研究，但没有发现太多。任何帮助，将不胜感激。

最佳答案

我会这样做：

$("#icon1 > var").text("8");

.icon {
  width:64px;
  height:64px;
  position:relative;
  background:yellow;
}

.icon > var {
  position:absolute;
  top:0;
  right:0;
  padding:2px 8px;
  background: red; color: white;
  border-radius:3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=icon id="icon1">
  <var></var>
</div>