JavaScriptで付与したclassの個数を数えて表示したいです

前提・実現したいこと

JavaScriptで特定のclassを付与したHTML要素の個数を数えてHTMLで表示したいです

該当のソースコード

window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelector('#filterBtn').addEventListener('click',()=>{
    var r1=document.querySelectorAll('[name="cat[fa][]"]:checked');
   
    document.querySelectorAll('.filter-items li[data-filter-key]').forEach(x=>{
      var flgs=[];
      var keys=x.dataset["filterKey"].split(" ");
      if(r1.length>0){
        flgs.push(keys.some(x=>[...r1].map(x=>x.value).includes(x)));
      }
      
      var flg=x.classList.toggle('hide',flgs.includes(false));
      x.classList.remove('view');
      x.classList.add('hide');
    });
  });
});
$(function()
        {
           var count = $('.view').length;
			 $('#num').text(count.toString());
        });

$(function()
        {
            var count = $('.cont').length;
			 $('#allnum').text(count.toString());
        });

HTML
1<p class="count_num"><span id="allnum"></span>件中｜<span id="num"></span>件表示</p>
2
3<form>
4<h3>〇〇</h3>
5<ul>
6<li><label><input type="checkbox" name="cat[fa][]" value="fa1">あ</label></li>
7<li><label><input type="checkbox" name="cat[fa][]" value="fa2">い</label></li>
8<li><label><input type="checkbox" name="cat[fa][]" value="fa3">う</label></li>
9</ul>
10<hr>
11
12<button id="filterBtn" type="button">上記の条件で検索する</button>
13</form>
14<ul class="filter-items">
15<li data-filter-key="fa3" class="cont view">
16<p>う</p>
17</li>
18<li data-filter-key="fa1" class="cont view">
19<p>あ</p>
20</li>
21<li data-filter-key="fa1" class="cont view">
22<p>あ</p>
23</li>
24</ul>

CSS
1	.hide{
2		display:none;
3	}

試したこと

.contの個数は
$(function()
{
var count = $('.cont').length;
$('#allnum').text(count.toString());
})
で表示することができたのですが、
.viewの個数が表示できませんでした

追記

検索で絞り込みされて表示されない要素はクラス名.hideを付けています
クラス名.contを付けたHTML要素からクラス名.hideを付けた要素を引けば、
現在表示されている件数が表示できるかと思いましたができませんでした。
なぜ表示できないのでしょうか？

(クラス名.hideは上のコードで付与しています)

JavaScript
1 $(function()
2        {
3            var count = $('.cont').length;
4		 	var kensu = $('.hide').length;
5		 	var result = parseInt(count) - parseInt(kensu);
6			 $('#allnum').text(count.toString());
7		 	 $('#num').text(result.toString());
8        });

行動規範の内容に同意します

回答2件

javascript
1<div id="hoge" class="hoge1 hoge2 hoge3 hoge2">hoge</div>
2<script>
3console.log(document.querySelector('#hoge').classList.length)
4</script>

投稿2020/08/27 06:22

yambejp

総合スコア116734

spraut

2020/08/27 07:16

回答ありがとうございます個数はコンソールではなくHTML内で表示がしたいです .text()でHTMLでクラスを付けた.contは数えられたのですが、JavaScriptでクラスを付けた.viewは数えられないのはなぜでしょうか…？

yambejp

2020/08/27 07:19

もうちょいわかりやすい例をあげてください。クラスの個数がほしいのではなくて、特定のクラスをつけたHTML要素の数ですかね？

spraut

2020/08/27 07:23

申し訳ございません… はい、欲しいのは特定のクラス(.view)をつけたHTML要素の数です

yambejp

2020/08/27 07:36

普通に $('#allnum').text($('.view').length) ではいけないのですか？

spraut

2020/08/27 07:46

試したのですが0のままで変わりませんでしたこれはクラスがうまく付けられていないということでしょうか？

yambejp

2020/08/27 07:51

逆にviewクラスを付加しているのはどこでしょうか？

spraut

2020/08/27 08:13

CSSでviewクラスにスタイルの指定ができていたので付加ができていると思っていたのですが jsを確認したところ付与しているのはhideでした。申し訳ございません条件がfalseの場合にviewクラスを外してhideクラスを付与すると思うのでHTMLのliタグにviewクラスを指定したのですが、それだと全件分数えられてしまいました

行動規範の内容に同意します

自己解決

JavaScript
1window.addEventListener('DOMContentLoaded', ()=>{
2  document.querySelector('#filterBtn').addEventListener('click',()=>{
3    var r1=document.querySelectorAll('[name="cat[fa][]"]:checked');
4    var cnt=0;
5    document.querySelectorAll('.filter-items li[data-filter-key]').forEach(x=>{
6      var flgs=[];
7      var keys=x.dataset["filterKey"].split(" ");
8      if(r1.length>0){
9        flgs.push(keys.some(x=>[...r1].map(x=>x.value).includes(x)));
10      }
11  var flg=x.classList.toggle('hide',flgs.includes(false));
12      x.classList.remove('view');
13      x.classList.add('hide');
14      setTimeout(()=>{
15        x.classList.toggle('hide',flg);
16        x.classList.toggle('view',!flg);
17      },10);
18		
19		if(flg==false) cnt=cnt+1;
20		
21    });
22      
23      
24      $('#num').text(cnt);
25          
26  });
27});