JavascriptでHTMLの複数ある同一クラス名の中にある要素数を取得したい。

Question

修正中

質問の仕方に指摘がありましたので、適切な文章、コードに書き直しています。

Comments

[kei344]

クラス名が item2 item8 などなっていますが、何のために変えているのでしょうか。また、「このクラスを追加するというコード」はどの要素に対して何のクラスをつけるのでしょうか。

[退会済みユーザー]

申し訳ありません。CSSで画像の表示について記述しており、そのためです。
CSSをこちらに追加し忘れていたので、ただいま追加しました。よろしくお願いいたします。

[kei344]

「このクラスを追加するというコード」はどの要素に対して何のクラスをつけるのでしょうか。

[退会済みユーザー]

各子要素（divタグで分けているもの）につけているitem1などは最終的に外して、javascriptで条件に合えばCSSの.item1を適用させるために、class item1を追加しようとしています。
今かけているjavascriptの場合だと、moreというクラスを、grid-contaner内の画像の数が６枚以上の時にitem5　moreのようにitem5クラスにmoreを追加しようとしています。
分かりにく申し訳ありません。よろしくお願いいたします。

[thyda.eiqau]

え？
<div class="grid-contaner"> の中の画像の数に応じて、 <div class="grid-contaner なんらかのクラス"> にするってことじゃないんですか？ <div class="grid-contaner>ちょっかの<div>に対してクラスを与えるの？？

[kei344]

その具体的な条件も質問文に書かれたほうがよいです。（この「質問への追記・修正の依頼」の部分はデフォルトで表示されませんので、質問本文に追記することをお勧めします） 既についている回答はその「具体的な条件」がわからないから「適当な条件」をサンプルに処理の仕方を書かれています。

[退会済みユーザー]

thyda.eiqauさん
<div class="grid-contaner>の下にある各画像要素に対してクラスをつけたいです。

[退会済みユーザー]

kei344さん
ありがどうございます。修正します。

Answer 1

querySelectorAllでforEachしてそれぞれについてquerySelectorAllして
必要なdomを掴んでください

Comments

[yambejp]

document.querySelectorAll('.hoge').forEach(x=>{
console.log(x.querySelectorAll('.fuga').length);
});

まとめて値をとりたいなら配列化してmapすることになります。
具体的な要望がわかりづらいのでもういちど精査してみてください

[退会済みユーザー]

丁寧に教えてくださりありがとうございました。
もっと分かりやすく記載すべきですね、申し訳ありません。

Answer 2

const classNamesForImgQty = [
  null,
  'alpha',
  'bravo',
  'charlie',
  'delta',
  'echo',
  'foxtrot',
  'golf',
];
querySelectorAll('.grid-contaner').forEach(container => {
  console.log('container', container);
  const imgQty = container.querySelectorAll('img').length;
  console.log('> image qty', imgQty);
  if(imgQty === 0) return;
  const className = classNamesForImgQty[imgQty];
  console.log('> adding class name', className);
  container.classList.add(className);
});

追記

正直、クラスで指定するのが簡単か（やりやすいか・わかりやすいか）というと微妙な気がしますが……

// .grid-contaner の要素を取得し、forEachで回す
// 本筋とは関係ないですが、grid-conta"i"nerでは？
document.querySelectorAll('.grid-contaner').forEach(container => {
  // 画像の数は querySelectorAll('img').length で取得してもよいが、
  // 将来的にimg以外の要素が入ってくる可能性を考慮して、直下のdivの数で取得する
  const children = container.querySelectorAll(':scope > div');
  if(children.length === 0) return;

  container 直下の <div> を取得し、forEachで回す
  container.querySelectorAll(':scope > div').forEach((gridItem, idx) => {
    switch(idx) {
      case 0:
        // 1つ目は基本的にはitem1
        gridItem.className = 'item1';
        
        // 画像の数が1つのときはitem10, 2つのときはitem9
        if(children.length <= 2) {
          gridItem.className = `item${11-children.length}`;
        }
        break;
      case 1:
        // 2つ目は基本的にはitem2
        gridItem.className = 'item2';
        
        // 画像の数が2つのときはitem8
        if(children.length === 2) gridItem.className = `item8`;
        break;
      case 2:
      case 3:
      case 4:
        // 3つ目から5つ目は基本的にはitem${idx+1}
        gridItem.className = `item${idx+1}`;

        // 画像の数が4つのときはitem${idx+4}
        if(children.length === 4) gridItem.className = `item${idx+4}`;
        
        // 画像の数が3つのときの3つ目はitem8
        if(children.length === 3 && idx === 2) gridItem.className = 'item8';
        break;
      default:
        // 画像が6つ目以降のとき (idxが0から4ではないとき) はここで指定
        gridItem.className = 'more';
    }
  });
});

全体の幅と高さを固定しておいて、grid-templateを2等分なり3等分なりに変えたほうがいいような気がします。幅を3つに分けるところは5列ずつでいいとしても2つに分けるところが7列・8列になっていて気持ち悪いし……

さらに追記

別解です。gridの子供に指定するのではなく、親のgrid-templateを変えてしまえばよいという考え方です。

.grid-container {
  display: grid;
  width: 100px;
  height: 100px;
}
.grid-container[data-children-qty="1"] {
  grid-template: "a" 1fr / 1fr;
}
.grid-container[data-children-qty="2"] {
  grid-template:
    "a" 1fr
    "b" 1fr / 1fr;
}
.grid-container[data-children-qty="3"] {
  grid-template:
    "a a" 1fr
    "b c" 1fr / 1fr 1fr;
}
.grid-container[data-children-qty="4"] {
  grid-template:
    "a b" 1fr
    "c d" 1fr / 1fr 1fr;
}
.grid-container[data-children-qty="5+"] {
  grid-template:
    "a a a b b b" 1fr
    "c c d d e e" 1fr / 1fr 1fr 1fr 1fr 1fr 1fr;
}
.grid-container > div {
  border: 1px solid #222;
}

/* more */
.grid-container > div:nth-child(n+6) {
  background-color: gray;
}
.grid-container > div:nth-child(n+6) p {
  font-size: 2.5rem;
  display: block;
  position: relative;
  left: 70px;
  top: -170px;
  color: white;
}
.grid-container > div:nth-child(n+6) img {
  opacity: 0.6;
  display: block;
}
.grid-container > div:nth-child(n+6) a {
  color: white;
  text-decoration: none;
}

document.querySelectorAll('.grid-container').forEach(container => {
  const children = container.querySelectorAll(':scope > div');
  if(children.length === 0) return;

  container.dataset.childrenQty = children.length >= 5? '5+' : children.length;
  children.forEach((div, idx) => div.style.gridArea = 'abcde'.split('')[idx]);
});

• CodePen

Comments

[thyda.eiqau]

要件と違いましたのでのちほど追記します

[退会済みユーザー]

試してみたところ、思った通りに表示されました。
次からは自分で書けるように、努力しようと思います。
私のような初心者の分かりにくい質問に対して、お時間をくださったこと感謝します。
ご丁寧に教えてくださりありがとうございました。

[退会済みユーザー]

追記ありがとうございます！
知らないCSSの記載方法もあったので、じっくり見て理解しようと思います。
今、はじめにお答えいただいたJavascriptを読み解いているのですが、
このJavascriptに、要素が６枚以上になった時、５枚目の要素に特定のCSSを記載すると記述する場合はどのように書けば良いでしょうか？
default:に書くと、６枚目にCSSが適応されてしまい、どうしたら良いか悩んでいます。

[退会済みユーザー]

何度もすみません。自分で解決できました！
この度はありがとうございました。