underdog underdog - 1 year ago 125
jQuery Question

Jquery bootstrap facebook style notification

I am writing a notification system just like Facebook using bootstrap 3.
I am using a bootstrap ul element with dropdown-menu class

<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>

Right now the li values are just hardcoded.

enter image description here

I need to display on the UI the number of notifications a user has, just like facebook does. Please see the below sample image, I need to display number of notifications just like 2 & 12 are displayed. I am not a deft javascript coder I am more of a backend java programmer. Can anyone guide me in the right direction as to how to achieve that? Is there any bootstrap plugin or something to achieve this? I did my research on web but did not find much. Any help would be appreciated.

enter image description here

Answer Source

I would do it as :

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

.icon > var {
  padding:2px 8px;
  background: red; color: white;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=icon id="icon1">