jQueryでFizzBuzzをし<li>でブラウザに表示したので、表示されたFizzの数をカウントしてまたブラウザに表示したい

前提・実現したいこと

fizzBuzzのFizzの数をカウントし、ブラウザに表示したい
ここに質問の内容を詳しく書いてください。
jQueryでFizzBuzzをし<li>でブラウザに表示したので、そのFizzをカウントしてまたブラウザに表示したい

ソースコード
HTML
<body>
    <ul id="fizzBuzz"></ul>
    <div id="fizzCount"></div>
</body>

JS
$(function(){
    var v;
    for (i = 1; i <=100; i++) {
        if (i % 3 === 0 && i % 5 === 0) {
                v = "fizzBuzz";
            } else if(i % 3 === 0) {
                v = "fizz";
            } else if(i % 5 === 0 ) {
                v = "Buzz";
            } else {
                v = i;
            }
            $("#fizzBuzz").append('<li>' + v + '</li>');
    }
});

### 試したこと

 else if(i % 3 === 0) {
                v = "fizz";
                $(this).attr("id","fizz");
でidを付与して

$(function () {
    var counter = 0;
    $('#fizz').each(function () {
        counter++;
    });
    $("#fizzCount").append('<li>fizzは' + counter + '個です</li>');
});

また<li>にidを直接つけようとも思ったが全ての<li>に同じidが付くので判別には使えなかった。

で数えれるかと思ったがそもそもidの付与ができなかった。
for文の中でidの付与ができればそれで良いのだが調べてもその方法がわかりませんでした。

ここに問題に対して試したことを記載してください。

### 補足情報（FW/ツールのバージョンなど）
html
JavaScript
jquery
vsCode

ここにより詳細な情報を記載してください。

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

回答1件

ベストアンサー

ループ内で、"fizz"のときカウントアップすればいいのでは。

js
1$(function(){
2  var v, counter=0;
3  for (i = 1; i <=100; i++) {
4    if (i % 3 === 0 && i % 5 === 0) {
5      v = "fizzBuzz";
6    } else if(i % 3 === 0) {
7      v = "fizz";
8      counter++;
9    } else if(i % 5 === 0 ) {
10      v = "Buzz";
11    } else {
12      v = i;
13    }
14    $("#fizzBuzz").append('<li>' + v + '</li>');
15  }
16  $("#fizzCount").text('fizzは' + counter + '個です');
17});