Count only from visible cells

Asked

Viewed 134 times

0

I’m having a problem with my code. I have a dropdopwn menu that displays notifications. When the notification shows the same date as the current day it displays <div class="label notification-badge">NOVO</div>. The notification icon has a badge that counts <div class="label notification-badge">NOVO</div>, But I wanted you to count only when they’re visible, but you count even the hidden Ivs. Is there any way that I can only count the "new" displayed Ivs according to the date?

//Função para atualizar as mensagens
function refreshItens(){


  setTimeout(function(){ 

//Exibe a Label "Novo" quando a data está no dia atual

    $( ".data" ).each(function() {

      if($(this).html() === output || $(this).html() === ontem){
        $(this).nextAll(".label").css("visibility","visible");    

      }

    });
    
    //Conta quantas Label "Novo" estão visiveis

     $( ".notification-list" ).each(function() {
      if($(".notification-badge > div:visible").length === 0){
        $(".badge").text($(".notification-list div").length)
        
      }

    });

  }, 1000);

};

//Captura de data

d = new Date();

month = d.getMonth()+1;
day = d.getDate();
dayontem = d.getDate() - 1;
output = (day<10 ? '0' : '') + day + '/' + (month<10 ? '0' : '') + month + '/' + d.getFullYear();
ontem = (dayontem<10 ? '0' : '') + dayontem + '/' + (month<10 ? '0' : '') + month + '/' + d.getFullYear();


setTimeout(function(){ 

  refreshItens();

  console.log(output);
  console.log(ontem);

}, 1000);
.topbar{
  width:100%;
  height:50%;
  background-color:#eee;
  }
.dropbtn {
    
    color: black;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}



.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown a:hover {background-color: #f1f1f1}

.show {display:block;}
  
.badge{
  z-index: 1;
	margin-left:-7px;
	border-radius: .5em;
	font-size: 7pt;
	padding:10px;
	margin-top: 10px;
	background-color:#c92121;
	color:#fff;
  }
  
  .notification-badge{
	float: right; 
	margin: 3px;
	visibility: hidden;
	background-color:  #32E6C8;
	color:#00285F;
}

.notification-list{
	border-radius: 0px;
	border-left: 0px;
	border-right: 0px;
	cursor: default;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>

</head>
<body>

<nav class="topbar">
<div class="dropdown">
<div onclick="myFunction()" class="dropbtn"><i class="fa fa-envelope-square fa-3x"><span class="badge"></span></i></div>
  <div id="myDropdown" class="dropdown-content">
    <ul style="width:400px;">
    <li id="painelMsg" style="min-height: 50px; max-height: 400px; overflow: auto;" class="list-group notifica">
      <ul>
<!-- notificação 1 -->
<li class="list-group-item msg  notification-list"> 
   <span class="data" style="color: #199fae;">08/11/2016</span>  -
   <span class="titulo ">notificação 1</span>
   <div class="label label-primary notification-badge" >NOVO</div> 
</li>
<!-- notificação 2 -->
<li class="list-group-item msg  notification-list"> 
   <span class="data" style="color: #199fae;">07/11/2016</span> - 
   <span class="titulo">notificação 2</span>
   <div class="label label-primary notification-badge" >NOVO</div> 
</li>
<!-- notificação 3 -->
<li class="list-group-item msg  notification-list"> 
   <span class="data" style="color: #199fae;">20/09/2016</span> - 
   <span class="titulo">notificação 3</span>
   <div class="label notification-badge">NOVO</div>
</li>
<!-- notificação 4 -->
<li class="list-group-item msg  notification-list"> 
   <span class="data" style="color: #199fae;">20/09/2016</span> - 
   <span class="titulo">notificação 4 </span> 
   <div class="label notification-badge">NOVO</div>
</li>
<!-- notificação 5 -->
<li class="list-group-item msg  notification-list"> 
   <span class="data" style="color: #199fae;">20/09/2016</span> - 
   <span class="titulo">notificação 5</span> 
   <div class="label notification-badge">NOVO</div>
</li>
<!-- notificação 6 -->
<li  class="list-group-item msg  notification-list"> 
   <span class="data" style="color: #199fae;">20/09/2016</span> - 
   <span class="titulo">notificação 6</span>
   <div class="label notification-badge">NOVO</div>
</li>
 </ul>
 </li>
</ul>
</div>
</div>
  
</nav>
  
  
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>

</body>
</html>

  • To view the dropdown menu click below the icon, do not know why Scackoverflow is not allowing you to click on the icon

2 answers

4


Since you make a loop searching the labels and setting the visibility already makes the count

var count=0;
$( ".data" ).each(function() {
   ...
count++;

and at the end Seto the value according to the counter.

$(".badge").text(cont);

Follow the changed code...

//Função para atualizar as mensagens
function refreshItens(){


  setTimeout(function(){ 

//Exibe a Label "Novo" quando a data está no dia atual

    
    var cont = 0; //criei um contador
    
    $( ".data" ).each(function() {
      if($(this).html() === output || $(this).html() === ontem){
        $(this).nextAll(".label").css("visibility","visible");
        cont++; //quando encontro um label com a data certa incremento o contador

      }

    });
    $(".badge").text(cont); //coloco o valor do contador no lugar dele
    //Conta quantas Label "Novo" estão visiveis
/*
     $( ".notification-list" ).each(function() {
      if($(".notification-badge > div:visible").length === 0){
        
        
      }
    });
*/
  }, 1000);

};

//Captura de data

d = new Date();

month = d.getMonth()+1;
day = d.getDate();
dayontem = d.getDate() - 1;
output = (day<10 ? '0' : '') + day + '/' + (month<10 ? '0' : '') + month + '/' + d.getFullYear();
ontem = (dayontem<10 ? '0' : '') + dayontem + '/' + (month<10 ? '0' : '') + month + '/' + d.getFullYear();


setTimeout(function(){ 

  refreshItens();

  console.log(output);
  console.log(ontem);

}, 1000);
.topbar{
  width:100%;
  height:50%;
  background-color:#eee;
  }
.dropbtn {
    
    color: black;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}



.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown a:hover {background-color: #f1f1f1}

.show {display:block;}
  
.badge{
  z-index: 1;
	margin-left:-7px;
	border-radius: .5em;
	font-size: 7pt;
	padding:10px;
	margin-top: 10px;
	background-color:#c92121;
	color:#fff;
  }
  
  .notification-badge{
	float: right; 
	margin: 3px;
	visibility: hidden;
	background-color:  #32E6C8;
	color:#00285F;
}

.notification-list{
	border-radius: 0px;
	border-left: 0px;
	border-right: 0px;
	cursor: default;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>

</head>
<body>

<nav class="topbar">
<div class="dropdown">
<div onclick="myFunction()" class="dropbtn"><i class="fa fa-envelope-square fa-3x"><span class="badge"></span></i></div>
  <div id="myDropdown" class="dropdown-content">
    <ul style="width:400px;">
    <li id="painelMsg" style="min-height: 50px; max-height: 400px; overflow: auto;" class="list-group notifica">
      <ul>
<!-- notificação 1 -->
<li class="list-group-item msg  notification-list"> 
   <span class="data" style="color: #199fae;">10/11/2016</span>  -
   <span class="titulo ">notificação 1</span>
   <div class="label label-primary notification-badge" >NOVO</div> 
</li>
<!-- notificação 2 -->
<li class="list-group-item msg  notification-list"> 
   <span class="data" style="color: #199fae;">09/11/2016</span> - 
   <span class="titulo">notificação 2</span>
   <div class="label label-primary notification-badge" >NOVO</div> 
</li>
<!-- notificação 3 -->
<li class="list-group-item msg  notification-list"> 
   <span class="data" style="color: #199fae;">20/09/2016</span> - 
   <span class="titulo">notificação 3</span>
   <div class="label notification-badge">NOVO</div>
</li>
<!-- notificação 4 -->
<li class="list-group-item msg  notification-list"> 
   <span class="data" style="color: #199fae;">20/09/2016</span> - 
   <span class="titulo">notificação 4 </span> 
   <div class="label notification-badge">NOVO</div>
</li>
<!-- notificação 5 -->
<li class="list-group-item msg  notification-list"> 
   <span class="data" style="color: #199fae;">20/09/2016</span> - 
   <span class="titulo">notificação 5</span> 
   <div class="label notification-badge">NOVO</div>
</li>
<!-- notificação 6 -->
<li  class="list-group-item msg  notification-list"> 
   <span class="data" style="color: #199fae;">20/09/2016</span> - 
   <span class="titulo">notificação 6</span>
   <div class="label notification-badge">NOVO</div>
</li>
 </ul>
 </li>
</ul>
</div>
</div>
  
</nav>
  
  
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>

</body>
</html>

  • When I enter div:Visible it indicates that it has "0" notifications, when there actually is 1 new, when I remove counts the 6 notifications.

  • I re-edited the answer given 1 check ?

  • Perfect, thanks a brother

  • @Felipescarlva if the answer helped you put it right ;-)

  • Opa ta marcado ja

1

You can do this after the execution of for(), for the other elements, as you are aggregating the 'Visible' in the element with .css():

var total = $('.notification-badge[style="visibility: visible;"]').length;
$(".badge").text(total);

However, since you are already testing a condition, it is a second option to put a simple counter:

var total = 0;
$( ".data" ).each(function() {
   if ($(this).html() === output || $(this).html() === ontem) {
      $(this).nextAll(".label").css("visibility","visible");
      total++;
   } 
 //...
}
$(".badge").text(total);  

Browser other questions tagged

You are not signed in. Login or sign up in order to post.