Indication Indication - 14 days ago 6
CSS Question

Update no. of categories from list of div elements using JQuery

I have a list of categories as filter like shown below:

<div class='filterbox'>
<input type="checkbox" name="category[]" value="English"> English(<span id='English'>0</span>)
<input type="checkbox" name="category[]" value="Math"> Math(<span id='Math'>0</span>)
<input type="checkbox" name="category[]" value="Chemistry"> Chemistry(<span id='Chemistry'>0</span>)
<input type="checkbox" name="category[]" value="Geography"> Geography (<span id='Geography'>0</span>)
</div>


And I have display boxes like

<div class="boxcategory">
<div id='box1'><div class='categoryClass hidden'>English</div></div>
<div id='box2'><div class='categoryClass hidden'>English</div></div>
<div id='box3'><div class='categoryClass hidden'>Math</div></div>
<div id='box4'><div class='categoryClass hidden'>English</div></div>
<div id='box5'><div class='categoryClass hidden'>Chemistry</div></div>
<div id='box6'><div class='categoryClass hidden'>English</div></div>
<div id='box7'><div class='categoryClass hidden'>Math</div></div>
<div id='box8'><div class='categoryClass hidden'>Chemistry</div></div>
<div id='box9'><div class='categoryClass hidden'>Geography</div></div>
</div>


Using jquery, I want to update the total no in filterbox span from the displayed categories inside boxcategory class. Please guide.

Answer

count up the subjects by how many .categoryClass elements there are with the subject as their text content

function count (text) {
  return $('.categoryClass').filter((i, el) => el.innerHTML === text).length;
}

for (let subject of ['English', 'Math', 'Chemistry', 'Geography']) {
  $(`#${subject}`).text(count(subject));
}

see: https://jsfiddle.net/9my7f4qo/

note: you dont need jquery for this. vanilla js: https://jsfiddle.net/9my7f4qo/1/