jquery - capture content from all Divs with a set class

Asked

Viewed 96 times

-3

I have an agenda I want you to hide when every day of the week is 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 agenda is closed it works, but if the first day is open it does not perform the function. I believe it is on account of . html() only do the search on the first element.

How do I search for all elements ". agenda-status" and not only in the first?

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

jquery html loop

  • Do you intend to hide your own schedule when the day is closed? I recommend that you post your question in Portuguese, so that it is more easily understood. : p

  • Paulo, I put in Portuguese =), thank you. I intend to hide the agenda when every day (7) have the contents of the div <em class="agenda-status">Closed</em> Closed.

  • Can you describe better how these agendas were structured? Is it an agenda made with exactly 7 days? There are other weekly agendas on the page?

1 answer

0


From my understanding of the situation, the first step towards the solution will be to take all the elements with the class "agenda-day" and iterate them trying to individually obtain the status of each one. 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>

<ul class="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 interesting references about the solution:

Browser other questions tagged jquery html loop

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