classificação de mesclagem não está funcionando - código Javascript: não é possível encontrar o erro mesmo após a depuração

Question

lharby

Asked: 2025-01-22 20:08:27 +0800 CST2025-01-22 20:08:27 +0800 CST 2025-01-22 20:08:27 +0800 CST

O JavaScript embaralha elementos, mas rastreia o índice original ou usa o módulo para inseri-los na marcação pai

772

Tenho a seguinte marcação:

<div class="">
  <div class="tiled-gallery__gallery">
    <div class="tiled-gallery__row columns-1">
      <div class="tiled-gallery__col">
        <figure class="tiled-gallery__item">
          <a href="https://staging-7578-youthlandscapers.wpcomstaging.com/2024/12/11/our-team/our-team-dan/">
            <img
              srcset="https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-team-dan-1024x1024.jpeg?resize=600%2C600&amp;strip=info&amp;ssl=1 600w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-team-dan-1024x1024.jpeg?resize=900%2C900&amp;strip=info&amp;ssl=1 900w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-team-dan-1024x1024.jpeg?resize=1200%2C1200&amp;strip=info&amp;ssl=1 1200w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-team-dan-1024x1024.jpeg?resize=1500%2C1500&amp;strip=info&amp;ssl=1 1500w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-team-dan-1024x1024.jpeg?resize=1800%2C1800&amp;strip=info&amp;ssl=1 1800w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-team-dan-1024x1024.jpeg?resize=2000%2C2000&amp;strip=info&amp;ssl=1 2000w"
            />
          </a>
        </figure>
      </div>
    </div>
    <div class="tiled-gallery__row columns-2">
      <div class="tiled-gallery__col">
        <figure class="tiled-gallery__item">
          <a href="https://staging-7578-youthlandscapers.wpcomstaging.com/2024/12/11/our-team/our-team-jessica/">
            <img
              srcset="https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-team-jessica-1024x1024.jpg?resize=600%2C600&amp;strip=info&amp;ssl=1 600w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-team-jessica-1024x1024.jpg?resize=900%2C900&amp;strip=info&amp;ssl=1 900w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-team-jessica-1024x1024.jpg?resize=1132%2C1132&amp;strip=info&amp;ssl=1 1132w"
            />
          </a>
        </figure>
      </div>
      <div class="tiled-gallery__col">
        <figure class="tiled-gallery__item">
          <a href="https://staging-7578-youthlandscapers.wpcomstaging.com/2024/12/11/our-team/rebecca-2/">
            <img
              srcset="https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/Rebecca-1-1024x1024.jpg?resize=600%2C600&amp;strip=info&amp;ssl=1 600w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/Rebecca-1-1024x1024.jpg?resize=900%2C900&amp;strip=info&amp;ssl=1 900w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/Rebecca-1-1024x1024.jpg?resize=1200%2C1200&amp;strip=info&amp;ssl=1 1200w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/Rebecca-1-1024x1024.jpg?resize=1333%2C1333&amp;strip=info&amp;ssl=1 1333w"
            />
          </a>
        </figure>
      </div>
    </div>
    <div class="tiled-gallery__row columns-2">
      <div class="tiled-gallery__col">
        <figure class="tiled-gallery__item">
          <a href="https://staging-7578-youthlandscapers.wpcomstaging.com/2024/12/11/our-team/our-team-test-2/">
            <img
              srcset="https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-team-test-2-1024x768.jpeg?resize=600%2C600&amp;strip=info&amp;ssl=1 600w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-team-test-2-1024x768.jpeg?resize=900%2C900&amp;strip=info&amp;ssl=1 900w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-team-test-2-1024x768.jpeg?resize=1200%2C1200&amp;strip=info&amp;ssl=1 1200w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-team-test-2-1024x768.jpeg?resize=1500%2C1500&amp;strip=info&amp;ssl=1 1500w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-team-test-2-1024x768.jpeg?resize=1800%2C1800&amp;strip=info&amp;ssl=1 1800w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-team-test-2-1024x768.jpeg?resize=2000%2C2000&amp;strip=info&amp;ssl=1 2000w"
            />
          </a>
        </figure>
      </div>
      <div class="tiled-gallery__col">
        <figure class="tiled-gallery__item">
          <a href="https://staging-7578-youthlandscapers.wpcomstaging.com/2024/12/11/our-team/our-team-test-4/">
            <img
              srcset="https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-team-test-4-733x1024.jpeg?resize=600%2C600&amp;strip=info&amp;ssl=1 600w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-team-test-4-733x1024.jpeg?resize=900%2C900&amp;strip=info&amp;ssl=1 900w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-team-test-4-733x1024.jpeg?resize=1200%2C1200&amp;strip=info&amp;ssl=1 1200w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-team-test-4-733x1024.jpeg?resize=1500%2C1500&amp;strip=info&amp;ssl=1 1500w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-team-test-4-733x1024.jpeg?resize=1800%2C1800&amp;strip=info&amp;ssl=1 1800w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-team-test-4-733x1024.jpeg?resize=2000%2C2000&amp;strip=info&amp;ssl=1 2000w"
            />
          </a>
        </figure>
      </div>
    </div>
    <div class="tiled-gallery__row columns-2">
      <div class="tiled-gallery__col">
        <figure class="tiled-gallery__item">
          <a href="https://staging-7578-youthlandscapers.wpcomstaging.com/2024/12/11/our-team/our-teram-test-3/">
            <img
              srcset="https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-teram-test-3-1024x718.jpg?resize=600%2C600&amp;strip=info&amp;ssl=1 600w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-teram-test-3-1024x718.jpg?resize=900%2C900&amp;strip=info&amp;ssl=1 900w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-teram-test-3-1024x718.jpg?resize=1200%2C1200&amp;strip=info&amp;ssl=1 1200w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-teram-test-3-1024x718.jpg?resize=1500%2C1500&amp;strip=info&amp;ssl=1 1500w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-teram-test-3-1024x718.jpg?resize=1800%2C1800&amp;strip=info&amp;ssl=1 1800w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-teram-test-3-1024x718.jpg?resize=2000%2C2000&amp;strip=info&amp;ssl=1 2000w"
            />
          </a>
        </figure>
      </div>
      <div class="tiled-gallery__col">
        <figure class="tiled-gallery__item">
          <a href="https://staging-7578-youthlandscapers.wpcomstaging.com/2024/12/11/our-team/our-team-test-1/">
            <img
              srcset="https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-team-test-1-768x1024.jpg?resize=600%2C600&amp;strip=info&amp;ssl=1 600w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-team-test-1-768x1024.jpg?resize=900%2C900&amp;strip=info&amp;ssl=1 900w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-team-test-1-768x1024.jpg?resize=1200%2C1200&amp;strip=info&amp;ssl=1 1200w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-team-test-1-768x1024.jpg?resize=1500%2C1500&amp;strip=info&amp;ssl=1 1500w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-team-test-1-768x1024.jpg?resize=1800%2C1800&amp;strip=info&amp;ssl=1 1800w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-team-test-1-768x1024.jpg?resize=2000%2C2000&amp;strip=info&amp;ssl=1 2000w"
            />
          </a>
        </figure>
      </div>
    </div>
  </div>
</div>

Quero poder embaralhar cada item: <div class="tiled-gallery__item">em uma posição aleatória, porém o problema que tenho é que o primeiro item tem um contêiner pai que especifica 1 coluna, columns-1embora a maior parte da marcação use a classe de layout de 2 colunas columns-2.

Eu escrevi um shuffle básico usando este javascript:

const shuffleElems = () => {
  const wrapper = document.querySelector(".tiled-gallery__gallery");
  const items = wrapper.querySelectorAll(
    ".tiled-gallery__row .tiled-gallery__col"
  );

  for (var i = items.length; i >= 0; i--) {
    wrapper.appendChild(items[(Math.random() * i) | 0]);
  }
};

shuffleElems();

Isso funciona porque reorganiza os itens, mas poderia adicionar um único item em uma coluna que deveria levar dois. Então, presumo que preciso de alguma forma de rastrear o índice original e o novo, e usar um módulo ou verificar a classe pai. Ou possivelmente embaralhar tudo nas classes da coluna 2 e então apenas trocar a única linha no final?

Espero que isso faça sentido, todo o código está em codesandbox .

Adicionarei uma captura de tela em breve.

1 respostas

Voted

C3roe · Answer 1 · 2025-01-22T21:06:36+08:00

no entanto, o problema que tenho é que o primeiro item tem um contêiner pai que especifica 1 coluna columns-1, embora a maior parte da marcação use a classe de layout de 2 colunas columns-2.

Já que essa estrutura é o problema aqui, vamos ignorá-la então :-)

Pegue os itens da sua galeria, converta-os em uma matriz e embaralhe-os.

Em seguida, faça um loop nas colunas e simplesmente adicione um item da matriz embaralhada a cada uma delas.

(Substituí as imagens por números simples em forma de texto aqui e adicionei um contorno aos .tiled-gallery__rowelementos para que possamos ver facilmente os itens sendo embaralhados, mas permanecendo dentro da estrutura fornecida.)

let items = [...document.querySelectorAll('.tiled-gallery__gallery .tiled-gallery__item')];
shuffleArray(items);

document.querySelectorAll('.tiled-gallery__gallery .tiled-gallery__col').forEach(function(parent, index) {
   parent.appendChild(items[index]);
});


// array shuffle function grabbed from the internet, feel free to replace with your own
function shuffleArray(array) {
    for (let i = array.length - 1; i >= 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
    }
}

.tiled-gallery__row { outline: 1px solid blue; }

<div class="">
  <div class="tiled-gallery__gallery">
    <div class="tiled-gallery__row columns-1">
      <div class="tiled-gallery__col">
        <figure class="tiled-gallery__item">
          <a href="https://staging-7578-youthlandscapers.wpcomstaging.com/2024/12/11/our-team/our-team-dan/">
            1
          </a>
        </figure>
      </div>
    </div>
    <div class="tiled-gallery__row columns-2">
      <div class="tiled-gallery__col">
        <figure class="tiled-gallery__item">
          <a href="https://staging-7578-youthlandscapers.wpcomstaging.com/2024/12/11/our-team/our-team-jessica/">
            2
          </a>
        </figure>
      </div>
      <div class="tiled-gallery__col">
        <figure class="tiled-gallery__item">
          <a href="https://staging-7578-youthlandscapers.wpcomstaging.com/2024/12/11/our-team/rebecca-2/">
            3
          </a>
        </figure>
      </div>
    </div>
    <div class="tiled-gallery__row columns-2">
      <div class="tiled-gallery__col">
        <figure class="tiled-gallery__item">
          <a href="https://staging-7578-youthlandscapers.wpcomstaging.com/2024/12/11/our-team/our-team-test-2/">
            4
          </a>
        </figure>
      </div>
      <div class="tiled-gallery__col">
        <figure class="tiled-gallery__item">
          <a href="https://staging-7578-youthlandscapers.wpcomstaging.com/2024/12/11/our-team/our-team-test-4/">
            5
          </a>
        </figure>
      </div>
    </div>
    <div class="tiled-gallery__row columns-2">
      <div class="tiled-gallery__col">
        <figure class="tiled-gallery__item">
          <a href="https://staging-7578-youthlandscapers.wpcomstaging.com/2024/12/11/our-team/our-teram-test-3/">
            6
          </a>
        </figure>
      </div>
      <div class="tiled-gallery__col">
        <figure class="tiled-gallery__item">
          <a href="https://staging-7578-youthlandscapers.wpcomstaging.com/2024/12/11/our-team/our-team-test-1/">
            7
          </a>
        </figure>
      </div>
    </div>
  </div>
</div>

O JavaScript embaralha elementos, mas rastreia o índice original ou usa o módulo para inseri-los na marcação pai

Reformatar números, inserindo separadores em posições fixas

Por que os conceitos do C++20 causam erros de restrição cíclica, enquanto o SFINAE antigo não?

Problema com extensão desinstalada automaticamente do VScode (tema Material)

Vue 3: Erro na criação "Identificador esperado, mas encontrado 'import'" [duplicado]

Qual é o propósito de `enum class` com um tipo subjacente especificado, mas sem enumeradores?

Como faço para corrigir um erro MODULE_NOT_FOUND para um módulo que não importei manualmente?

`(expression, lvalue) = rvalue` é uma atribuição válida em C ou C++? Por que alguns compiladores aceitam/rejeitam isso?

Um programa vazio que não faz nada em C++ precisa de um heap de 204 KB, mas não em C

PowerBI atualmente quebrado com BigQuery: problema de driver Simba com atualização do Windows

AdMob: MobileAds.initialize() - "java.lang.Integer não pode ser convertido em java.lang.String" para alguns dispositivos

O JavaScript embaralha elementos, mas rastreia o índice original ou usa o módulo para inseri-los na marcação pai

1 respostas

relate perguntas