Count elements with certain class exists after a click action

user_2594961 0
Viewed 33

I have 2 "Halls" and a link which hides the hall. After click, I want to count how many elements with machine-on exist. I tried the following but it doesn't work.. any ideas?

For example, when I click Hide Hall 1, the counter should return 1.

$('.hide-hall').click(function() {

  $(this).closest('.hall').addClass('d-none');

  var counterOn = 0;
  $('.hall :not(.d-none)').children('.btn').each(function() {
    if ($(this).hasClass('machine-on')) {
      counterOn++;
    }
  });

  console.log("counterOn = " + counterOn);

});
.d-none {
  display: none;
}

.machine-on {
  color: blue;
}

.machine-off {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="hall">
  <p> HALL 1 <a href="#" class="hide-hall" title="Hide hall">Hide</a></p>
  <span class="btn machine-on">Machine 1</span>
  <span class="btn machine-on">Machine 2</span>
  <span class="btn machine-off">Machine 3</span>
</div>
<br/><br/>
<div class="hall">
  <p> HALL 2 <a href="#" class="hide-hall" title="Hide hall">Hide</a></p>
  <span class="btn machine-on">Machine 4</span>
</div>

jquery
2 Answers

The space before :not causes this not to work.

$('.hall:not(.d-none)').children('.btn').each(function() {

Full code:

$('.hide-hall').click(function() {

  $(this).closest('.hall').addClass('d-none');

  var counterOn = 0;
  $('.hall:not(.d-none)').children('.btn').each(function() {
    if ($(this).hasClass('machine-on')) {
      counterOn++;
    }
  });

  console.log("counterOn = " + counterOn);

});
.d-none {
  display: none;
}

.machine-on {
  color: blue;
}

.machine-off {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="hall">
  <p> HALL 1 <a href="#" class="hide-hall" title="Hide hall">Hide</a></p>
  <span class="btn machine-on">Machine 1</span>
  <span class="btn machine-on">Machine 2</span>
  <span class="btn machine-off">Machine 3</span>
</div>
<br/><br/>
<div class="hall">
  <p> HALL 2 <a href="#" class="hide-hall" title="Hide hall">Hide</a></p>
  <span class="btn machine-on">Machine 4</span>
</div>

user_35599110

You could count the elements a lot easier by selecting all .hall that do .not have .d-none and count the amount of .find('.machine-on') using .length.

$('.hide-hall').click(function() {
  $(this).closest('.hall').addClass('d-none');

  console.log($('.hall').not('.d-none').find('.machine-on').length);
});
.d-none {
  display: none;
}

.machine-on {
  color: blue;
}

.machine-off {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="hall">
  <p> HALL 1 <a href="#" class="hide-hall" title="Hide hall">Hide</a></p>
  <span class="btn machine-on">Machine 1</span>
  <span class="btn machine-on">Machine 2</span>
  <span class="btn machine-off">Machine 3</span>
</div>
<br/><br/>
<div class="hall">
  <p> HALL 2 <a href="#" class="hide-hall" title="Hide hall">Hide</a></p>
  <span class="btn machine-on">Machine 4</span>
</div>

user_150513100
Related