javascriptでブロックごとで条件分技したい

Question

■やりたい事
色を管理するツールを作っているのだが、1個目のpalette-blockのpalette-itemでは白と黒、2つ目のpalette-blockのpalette-itemでは赤と青と表示できるようにしたい。

要するに
1つ目のpalette-blockのpalette-itemだけを取得して黒としろ
2つ目のpalette-blockのpalette-itemだけを取得して赤と青
というように変えたい。

■問題点
palette-itemこれが色の部分なのだがどうしても全ての要素を取得してしまいundefaindと言うようになってしまう。

■行動した事
単純にpalette-item1、palette-item12とクラスをつけて区別をしたが、これが100個とかなるとcssの記述がやばいことになるので断念しました。

<div class="palette-box">

    <div class="palette-block">
      <div class="palette-item__wrapper">
        <div class="palette-item1">aa</div>
        <div class="palette-item1">aa</div>
        <div class="palette-item1">aa</div>
        <div class="palette-item1">aa</div>
      </div>
      <form action="">
        <button class="likes"><i class="fas fa-heart"></i></button>
      </form>
    </div>

    <div class="palette-block">
      <div class="palette-item__wrapper">
        <div class="palette-item2"></div>
        <div class="palette-item2"></div>
        <div class="palette-item2"></div>
        <div class="palette-item2"></div>
      </div>
      <form action="">
        <button class="likes"><i class="fas fa-heart"></i></button>
      </form>
    </div>

    <div class="palette-block">
      <div class="palette-item__wrapper">
        <div class="palette-item3"></div>
        <div class="palette-item3"></div>
        <div class="palette-item3"></div>
        <div class="palette-item3"></div>
      </div>
      <form action="">
        <button class="likes"><i class="fas fa-heart"></i></button>
      </form>
    </div>

    <div class="palette-block">
      <div class="palette-item__wrapper">
        <div class="palette-item4"></div>
        <div class="palette-item4"></div>
        <div class="palette-item4"></div>
        <div class="palette-item4"></div>
      </div>
      <form action="">
        <button class="likes"><i class="fas fa-heart"></i></button>
      </form>
    </div>

  </div>

.palette-box{
  display: flex;
}

.palette-block{
  width: calc(100%/4);
}

.palette-item__wrapper{
  display: flex;
  flex: 1;
}

.palette-item__wrapper .palette-item1,
.palette-item2,
.palette-item3{
  width: 50%;
  height: 5rem;
}

function GeneratePaletteItemColor() {
  const paletteBlock = document.querySelectorAll('.palette-block');
  if (paletteBlock[0]) {
    const pale = document.querySelectorAll('.palette-item1');
    //chroma.scaleで色を生成してます。
    const Colors = chroma.scale(['white', 'black']).colors(4);
    pale.forEach((div, index) => {
      const color = Colors[index];
      div.style.backgroundColor = color;
    });
  }
  if(paletteBlock[2]){
    const pale = document.querySelectorAll('.palette-item2');
    const Colors = chroma.scale(['red', 'blue']).colors(4);
    pale.forEach((div, index) => {
      const color = Colors[index];
      div.style.backgroundColor = color;
    });
    }

    if(paletteBlock[3]){
      const pale = document.querySelectorAll('.palette-item3');
      const Colors = chroma.scale(['#ea7070', '#2694ab']).colors(4);
      pale.forEach((div, index) => {
        const color = Colors[index];
        div.style.backgroundColor = color;
      });
      }
}

Comments

[gasbombe]

1つ目と2つ目だけならあとは100個あっても関係ないですよね？
やりたいことはどれでしょうか
・100個あっても、1つめと2つめだけに色を指定したい
・奇数番目と偶数番目で別の色を指定したい
・100個あれば100個とも別々の色を指定したい。

[yambejp]

黒と白とか赤と青とは具体的にどういう状況でしょうか？
手書きでいいので図示してもらえると回答しやすいと思います

[Lhankor_Mhy]

chroma.js を使っていますか？

Answer 1

const pale = paletteBlock[0].querySelectorAll('.palette-item');
const pale = paletteBlock[1].querySelectorAll('.palette-item');

とすればクラスが共通しててもブロックごとに変えることができました。