Home / Questions / 432174
Accepted
E-Rick
Asked: 2022-03-03 06:22:19 +0800 CST 2022-03-03 06:22:19 +0800 CST

How do I find the .acitve elements within each .sema element?

  • 772

I think the error I have is that the week variable is no longer a jquery element. How could I transform it again so that it would admit the methods of the jquery elements?

How can I find the elements that have a certain class within the result of the elements that contain a certain class?

$('body').on('click', '.dia', function(ev) {
  $(this).addClass('active');
});


$('input').on('click', function(ev) {
  let diasElegidos = [];
  let diasDeCadaSesion = $('.sema');
  diasDeCadaSesion.each(idexWeek => {
    week = diasDeCadaSesion[idexWeek];
    console.log({
      idexWeek
    });
    let dias = week.find('.active');
    dias.each(dia => {
      diasElegidos.push(dia.data('day'));
    })
    //console.log({diasElegidos});
  });
});
.dia {
  display: inline;
}

.active {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="semas">
  <div class="sema">
    <div data-day="l" class="dia ">l</div>
    <div data-day="m" class="dia ">m</div>
    <div data-day="x" class="dia">x</div>
    <div data-day="j" class="dia">j</div>
    <div data-day="v" class="dia">v</div>
    <div data-day="s" class="dia">s</div>
    <div data-day="d" class="dia">d</div>
  </div>
  <div class="sema">
    <div data-day="l" class="dia">l</div>
    <div data-day="m" class="dia">m</div>
    <div data-day="x" class="dia">x</div>
    <div data-day="j" class="dia">j</div>
    <div data-day="v" class="dia">v</div>
    <div data-day="s" class="dia">s</div>
    <div data-day="d" class="dia">d</div>
  </div>
</div>
<input type="button" value="Procesar">

The solution to the problem does not have to be in jquery.

jquery

1 Answers

  1. Best Answer

    You are focusing the each wrong.

    each iteration of each already returns a set of the elements inside the element. Therefore, you can use $(this).find(".active"), and use another each for it to know the chosen days. It is not necessary to do a variable[0]within a each, unless they are arrays of javascript objects.

    $('body').on('click', '.dia', function(ev) {
    $(this).addClass('active');
});


$('input').on('click', function(ev) {
    let diasElegidos = [];
    let diasDeCadaSesion = $('.sema');
    diasDeCadaSesion.each(function() {
        let dia = $(this).find(".active");
        dia.each(function() {
            diasElegidos.push($(this).attr("data-day"))
        })
        console.log(diasElegidos)
    });
});
    .dia {
  display: inline;
}

.active {
  color: red;
}
    <div class="semas">
  <div class="sema">
    <div data-day="l" class="dia ">l</div>
    <div data-day="m" class="dia ">m</div>
    <div data-day="x" class="dia">x</div>
    <div data-day="j" class="dia">j</div>
    <div data-day="v" class="dia">v</div>
    <div data-day="s" class="dia">s</div>
    <div data-day="d" class="dia">d</div>
  </div>
  <div class="sema">
    <div data-day="l" class="dia">l</div>
    <div data-day="m" class="dia">m</div>
    <div data-day="x" class="dia">x</div>
    <div data-day="j" class="dia">j</div>
    <div data-day="v" class="dia">v</div>
    <div data-day="s" class="dia">s</div>
    <div data-day="d" class="dia">d</div>
  </div>
</div>
<input type="button" value="Procesar">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    • 1