複数のリストの中の要素数を個別に数えたい

Question

前提

リスト（親要素）の子要素の数を数えて、それに応じてクラスを付与したいです。

作ってみたのですが、リストは1つじゃなく複数あるので
そのページの合計子要素になってうまく動きません。

リストごとに分割して子要素の数を数えるにはどうしたらいいでしょうか。

リストに別々のクラスをつけることはできないです。

ご教授いただけますと幸いです。

該当のソースコード

<ul class="BoxList">
  <li class="LIst"><span><img src=""></span></li>
  <li class="LIst"><span><img src=""></span></li>
  <li class="LIst"><span><img src=""></span></li>
  <li class="LIst"><span><img src=""></span></li>
</ul>

<ul class="BoxList">
  <li class="LIst"><span><img src=""></span></li>
  <li class="LIst"><span><img src=""></span></li>
  <li class="LIst"><span><img src=""></span></li>
  <li class="LIst"><span><img src=""></span></li>
  <li class="LIst"><span><img src=""></span></li>
</ul>

<script>
$(function() {
    var size = $(".LIst").length;
     console.log(size);　//結果が9になる　4と5になりたい


    if(size === 4) {
            $("..LIst").addClass("row_4");
        }
    if(size === 5) {
            $("..LIst").addClass("row_5");
        }
});
</script>

Answer 1

window.addEventListener('DOMContentLoaded', ()=>{
const list=[...document.querySelectorAll('ul')].map(x=>x.querySelectorAll('li').length);
console.log(list);
});

クラスをつけるならこう？

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelectorAll('li').forEach(x=>{
    x.classList.add(`row_${x.closest('ul').querySelectorAll('li').length}`);
  });
});
</script>
<ul class="BoxList">
  <li class="LIst"><span><img src=""></span></li>
  <li class="LIst"><span><img src=""></span></li>
  <li class="LIst"><span><img src=""></span></li>
  <li class="LIst"><span><img src=""></span></li>
</ul>

<ul class="BoxList">
  <li class="LIst"><span><img src=""></span></li>
  <li class="LIst"><span><img src=""></span></li>
  <li class="LIst"><span><img src=""></span></li>
  <li class="LIst"><span><img src=""></span></li>
  <li class="LIst"><span><img src=""></span></li>
</ul>

Comments

[hana778]

早速のご対応ありがとうございます！
ローカルで試してみたら無事できたのですが
サーバーに上げるとうまく動きませんでした。エラーなども出ていません。
JavaScriptの書き方が新しい？とうまく読み込まれないことがあるのでしょうか。
（古めの環境で、他の JavaScriptはvarなどになっていたため）
先ほどのjQueryは読み込めているようでした。
すみませんがよろしくお願いします。

[yambejp]

ブラウザは何を想定していますか？
エラーがでてないならブラウザのせいじゃないかもしれませんが・・・

[hana778]

ブラウザはChromeなので大丈夫なんじゃないかと思います。
親ページと子ページに分かれていて
読み込むスピードの問題なのかもしれません。

Answer 2

質問者様のコードはjQueryですので、jQueryの記法・メソッドを使った手法をご紹介します。

考え方

• .BoxListを取得する
• そのそれぞれの子要素.LIstを取得する
• 取得した子要素に対し、子要素の個数の数字をclass名に付与する

コード例

• 動作確認用サンプル：https://jsfiddle.net/2fqzj1ve/2/

$(function() {
  $('.BoxList').each(function() { // BoxList2つに対し、それぞれ1つずつ繰り返し処理
    const $LIs = $(this).children('.LIst'); // 処理中のBoxListの子要素LIstを取得
    $LIs.addClass(`row_${$LIs.length}`); // LIstの長さが含まれたclass名を付与
  })
})

.each()について

.each()はjQueryオブジェクトに繰り返し処理をしてくれるjQueryメソッドです。
ピュアなJavaScriptの.forEach()と似ています。

第一・第二引数も使用できますが今回は不要のため使用しませんでした。

ちなみに第二引数の現在の要素は$(this)と同じ要素を参照します。
が、その要素に対しjQueryメソッドを使いたければ、$(this)の方を使用しましょう。
（今回は.children()というjQueryメソッドを使いたかったので、$(this)を採用しました。）

jQueryオブジェクト.each(function(インデックス, 現在の要素) {
  // 処理
})

// 例）
// こちら、質問者様のコードに追加して実行し、コンソールを確認してみるとわかりやすいと思います。
$(function() {
  $('.BoxList').each(function(index, element) {
    console.group(index);
    console.log('インデックス:', index);
    console.log('現在の要素:', element);
    console.log('this:', $(this));
    console.groupEnd();
  })
})

Comments

[hana778]

すみません、今気がつきました。
ご説明恐れ入ります。動作サンプルまでありがとうございました！

[Cocode]

はい！jQueryで書きたい場合はよかったらご参考ください。
（もう一人の方の回答はピュアJavaScriptだったので！）