更新番号jQueryの

Question

を使用してdiv要素の一覧からカテゴリの下に示すように私は、フィルタなどのカテゴリのリストを持っている：

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

そして、私は更新したい

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

はjqueryのを使用するように私は、ディスプレイボックスを持っていますフィルタボックス内の総数は、boxcategoryクラス内に表示されているカテゴリにまたがっています。ご案内ください。

Answer 1

そのテキストコンテンツとして対象

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

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

を参照してありますどのように多くの.categoryClass要素によって被験者をカウントアップ：https://jsfiddle.net/9my7f4qo/

注：このためのjQueryを必要といけません。バニラjs：https://jsfiddle.net/9my7f4qo/1/