jQueryで配列から一致する数をカウントする

Question

###目的
子リストの数をカウントしたいです。

###問題のコード
コードが長くてすみません。まずはサンプルです。
https://jsfiddle.net/psn5849w/136/

上のサンプルは下記コードですが、問題はjQueryの
var my_child_count = (parents.indexOf(my_post_num)).length;//カウントされない？
という部分でカウントされないことです。

これは配列parentsからmy_post_numと一致する数をlengthでカウントしているつもりですが、なぜかundifindになってしまいます。

改めまして目的ですが、このカウントを使って最後の行の
$(this).find('.count-box').text(my_child_count);
で.count-boxのテキストをカウント数に書き換えることです。

なぜカウントされないのか、ご教示頂ければと思いご質問させて頂きました。

<div class="alllists">
  <ul>

    <li>
      <div id="post-7" class="list" parent="0" ancestor="">A
            <span class="my_post_num"></span><span class="my_ancestor_num"></span>
      </div>
    </li>

    <li>
      <div id="post-157" class="list" parent="0" ancestor="">B
        <span class="my_post_num"></span><span class="my_ancestor_num"></span>
      </div>
      <ul class="childrens">
        <li>
          <div id="post-200" class="list" parent="157" ancestor="">C(Bの子)
            <span class="my_post_num"></span><span class="my_ancestor_num"></span>
          </div>
        </li>      
        <li>
          <div id="post-354" class="list" parent="157" ancestor="">D(Bの子)
            <span class="my_post_num"></span><span class="my_ancestor_num"></span>
          </div>
        </li>
        <li>
          <div id="post-365" class="list" parent="354" ancestor="">E(Dの子)
            <span class="my_post_num"></span><span class="my_ancestor_num"></span>
          </div>
        </li>         
      </ul>
    </li>

  </ul>
</div>

//先祖番号の連結
function getParentNums(list) {
  var parent_num = list.attr('parent');
  if (parent_num == "0") {
  return ["0"];
  }
  var parent = $("#post-" + parent_num); 
  var parent_nums = getParentNums(parent);
  parent_nums.push(parent_num);
  return parent_nums;
}
$('.list').each(function() {
  var my_post_num = $(this).attr('id').split('-')[1]; 
  var list = $(this);
  var parents = getParentNums(list);
  var my_ancestor_num = parents.join('-');
  list.attr('ancestor',my_ancestor_num);
  //確認のための表示
  $(this).find('.my_post_num').text(my_post_num);
  $(this).find('.my_ancestor_num').text(my_ancestor_num);
});

//子がいたら「ボタン」表示し、「子の数」を書き換える
var parents = [];
$(".list").each(function() {
  var parent_num = $(this).attr('parent'); 
  parents.push( parent_num );
});
$(".list").each(function() {
  $(this).after('<p>子の数：<span class="count-box">0</span></p>');
  var my_post_num = $(this).attr('id').split('-')[1];
  var my_child_count = (parents.indexOf(my_post_num)).length;//カウントされない？
  if (parents.indexOf(my_post_num) >= 0){
    $(this).append('<button>ボタン</button>');
    $(this).find('.count-box').text(my_child_count);    
  }
});

夜分に長いコードを提示して大変恐縮ではございますが、どうぞ宜しくお願い致します。

Answer 1

これは配列parentsからmy_post_numと一致する数をlengthでカウントしているつもりですが、なぜかundifindになってしまいます。

indexOf の理解が誤っているのでは。
indexOfの戻り値は、例えばconst array = [5, 3, 6, 7, 1, 6, 1]のような配列があったとき、
array.indexOf(1)の戻り値は4です。
array.indexOf(2)の戻り値は-1です。

そしてlengthはStringまたはArrayのプロパティです。
Numberにlengthプロパティはありません。

var my_child_count = (parents.indexOf(my_post_num)).length;
ここでやりたいのはおそらく
var my_child_count = parents.filter(num => num === my_post_num + '').length;
こういうことですよね。

これはparentsという配列からmy_post_numに一致する要素のみ抽出して新しい配列を作り、その長さを取得しています。
parents配列には文字列で数字が入っていたので、my_post_numは文字列に変換して比較しています。
厳密な比較が必要ないなら=== my_post_num + ''のところを=2個にして、== my_post_numにしても良いです。

で、直後のif文も条件式が誤っているので修正すればやりたいことができると思います。

Comments

[skipping]

おはようございます。とても丁寧にご説明頂き誠にありがとうございます。

ご指摘の２点（と、あとcount-box挿入位置）を修正したところ、無事に目的のカウントができました。

indexOfは該当位置を返すのですね。ありがとうございます。次のように誤解しておりました。

すなわち、
『var my_child_count = (parents.indexOf(my_post_num)).length;』
の部分は、
『var my_child_count =（parents の中から、my_post_num に該当するもの）。それを数える』
という指示のつもりでおりました。

なるほど。そうではなく該当位置を返すのなら、たしかにlengthで数えるわけにはいきませんね。理解致しました。ご指導に深く感謝です。

それにしても、
『var my_child_count = parents.filter(num => num === my_post_num + '').length;』
これは難しいですね。

『var my_child_count = parents にフィルターをかける（✕✕という内容で）。それを数える』
しか分かりません。

『num => num』は一体どんな指示になるの？『+』の意味は何なのか？疑問が絶えず…、

もしお時間がございましたらご教示頂けましたら幸いです。
（ご面倒でしたらスルーしてくださって結構です。どうもありがとうございました。）

[madoka9393]

横から失礼いたします。
私もPHPやJavaScript(jQuery)を学習中の身です故、知識確認も含め、可能な範囲でお手伝いさせていただきたく。

先ずは「filter」について、こちらをご確認いただけますと理解が深まるかと思います。
Array.prototype.filter() - JavaScript | MDN - Mozilla
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

×『num => num』の表記は『key => value』の関係です。
×この説明で疑問符が浮かぶようであれば、配列についての基礎知識の学習をお勧めいたします。
⇒申し訳ないです。お恥ずかしながら誤認識でした…。

『+』は変数「my_post_num」と後続の文字列「」(''の中)を連結するためのもの…なのですが、
この比較において「my_post_num」にくっつける意図は私では理解しきれませんでした…。
⇒回答者様の説明にある通り、「my_post_num」を文字列型に変換するために付与しているのですね。
数値に文字列を連結すると型が変換される(数値型⇒文字列型)ようです。
(変数と文字列の連結自体は基礎知識であるので、こちらも調べてみるとよろしいかと)

ご理解の一助になれば幸いです。
#誤認識等ありましたらご指摘いただきたく存じます。

[spookybird]

num => num === my_post_num + ''
この記述は「アロー関数」と言います。
(num) => {
return num === my_post_num + '';
}
このような記述を省略したものです。
numを引数にとり、numと文字列に変換したmy_post_numが一致する場合にtrueを返す関数です。
Array.prototype.filter()の引数は関数で、trueを返した要素だけを名前の通りフィルターします。
「アロー関数」がどういうものかはこちらを参照してください。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/arrow_functions

[skipping]

spookybird様、ご返信遅くなりまして大変申し訳ございません。記述の省略はいろいろ経験しないと難しそうですね。アロー関数についてはリンク先を参照し少しだけわかりました。どうもありがとうございました。

madoka9393様もご考察をありがとうございます。お蔭さまで「filter」について理解理解できました。

Answer 2

できたものです。
https://jsfiddle.net/psn5849w/146/