JQuery Classes Count in HTML

Question

I have a HTML which is receive input from users. My job is to count cards they enter and style these cards. Cards are placed inside <section>.

Problems: My Jquery is only counting and works well in one section. If users enter more than one sections, the code doesn't work. My code below shows when users enter 2 sections: cards in first section should be blue and cards in second section should be red, but now they are all blue.

jsfiddle

var numCard = $('.cards').length;
if (numCard == "2") {
  /* $('.cards').css('color', 'red'); */
  $("section .cards").parent().addClass("two-cards");
} else if (numCard == "3") {
  $("section .cards").parent().addClass("three-cards");
} else {
  $('section .cards').parent().addClass("four-cards");
}

body {
  padding: 20px;
  font-family: Helvetica;
}

.two-cards .cards {
  color: red;
}

.three-cards .cards {
  color: green;
}

.four-cards .cards {
  color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
  <div class="cards">
    First Card
  </div>
  <div class="cards">
    Second Card
  </div>
  <div class="cards">
    Third Card
  </div>
  <div class="cards">
    Third Card
  </div>
</section>
<p>

  <section>
    <div class="cards">
      First Card
    </div>
    <div class="cards">
      Second Card
    </div>
  </section>

if (numCard == "2") Why are you comparing an integer variable coercely with a string? — Taplar
– Taplar, Commented Apr 10, 2019 at 14:52

Zakaria Acharki · Accepted Answer · 2019-04-10 14:53:28Z

1

Working fiddle

You need to loop through the sections, then use this keyword to check :

$('section').each(function() {
  var numCard = $('.cards', this).length;

  if (numCard == "2") {
    $(this).addClass("two-cards");
  } else if (numCard == "3") {
    $(this).addClass("three-cards");
  } else {
    $(this).addClass("four-cards");
  }
});

body {
  padding: 20px;
  font-family: Helvetica;
}

.two-cards .cards {
  color: red;
}

.three-cards .cards {
  color: green;
}

.four-cards .cards {
  color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
  <div class="cards">
    First Card
  </div>
  <div class="cards">
    Second Card
  </div>
  <div class="cards">
    Third Card
  </div>
  <div class="cards">
    Third Card
  </div>
</section>
<p>
  <section>
    <div class="cards">
      First Card
    </div>
    <div class="cards">
      Second Card
    </div>
  </section>
</p>

answered Apr 10, 2019 at 14:53

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

abcid d Over a year ago

Hi Zakaria Acharki, thank you very much. That works well!

Zakaria Acharki Over a year ago

You're welcome, Glad I could help. If any answer helps you vote it up, if any answer is what you're looking for Mark it as the correct answer For the future readers.

abcid d Over a year ago

I just voted yours as a correct answer. I have a question: What does "this" mean (represent) in this code var numCard = $('.cards', this).length;?

Zakaria Acharki Over a year ago

You can vote it UP too, it will be helpful, whatever ( It's a shorthand of var numCard = $(this).find('.cards').length;

Collectives™ on Stack Overflow

JQuery Classes Count in HTML

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related