jquery - capture content from all divs with a set class

Navigation
-3

I have a schedule that I want to hide when all days of the week are closed. So I did this function that analyzes if the content of the day is Closed and if all 7 days have Closed it hides the agenda. 

    $( document ).ready(function() {
    var statusClosed = $('.agenda-status').html(); 
        if (statusClosed === 'Fechado') {
                $('.agenda-dia').addClass('dia-fechado');
                var semanaFechada = $('.agenda-semanal .dia-fechado').length;
                if( semanaFechada >= 7 ) {
                    $('.agenda-semanal').addClass('semana-fechada');
                    $('.semana-fechada').hide();
                }  
        }
});

It turns out that when every day of the calendar is closed it works, but if the first day is open it does not run the function. I believe it's because of .html () only doing the search in the first element.

How do I get it to search all the elements ".agenda-status" and not only in the first one?

<li class="agenda-dia "> <a href="javascript:;" data-type="Fechado"> <span class="dia-semana Domingo">Domingo</span> <em class="agenda-status">Fechado</em> </a></li>

    
asked by anonymous 28.06.2017 / 18:56

1 answer

0

From my understanding of the situation, the first step to the solution will be to get all the elements with the class " agenda-day " and iterates them trying to individually get the status of each. Ex: 

$( document ).ready(function() {

	var dias = $('.agenda-dia');
	var agendaStatus = [];

  $.each(dias, function() {
      var status = $(this).find('a .agenda-status').html();

      if (status == 'Fechado') {
          agendaStatus.push(this);
      }

      if (agendaStatus.length == dias.length) {
          $('.agenda-semanal').addClass('semana-fechada');
          $('.semana-fechada').fadeOut('slow');
      }
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ulclass="agenda-semanal">
    <li class="agenda-dia ">
        <a href="javascript:;" data-type="Fechado">
            <span class="dia-semana Domingo">Domingo</span>
            <em class="agenda-status">Fechado</em>
        </a>
    </li>
    <li class="agenda-dia ">
        <a href="javascript:;" data-type="Fechado">
            <span class="dia-semana Segunda">Segunda</span>
            <em class="agenda-status">Fechado</em>
        </a>
    </li>
</ul>

Below are some interesting references about the solution:

29.06.2017 / 00:16
Music recognition API (php) How to put the menu in responsive bootstrap mode