Maison  >  Questions et réponses  >  le corps du texte

Tous les 3 éléments enveloppent un élément parent

Je veux juste envelopper un div avec une classe de diaporama toutes les 3 divs avec une classe pour la recherche audio.

Une erreur que j'ai eue était qu'il disait elem.parentElement n'est pas défini...

Donc cette partie fonctionne très bien...

const audioBlocks = document.querySelectorAll('.search-audio');
const slider = document.querySelector('.slider');
const audioBlockArr = Array.from(audioBlocks);

function groupBlocks(arr, len) {

    let groups = [],
        i = 0,
        n = arr.length;
  
    while (i < n) {
      groups.push(arr.slice(i, i += len));
    }
  
    return groups;
  }

newArr = [...groupBlocks(audioBlockArr, 3)];

Voici le problème : envelopper un div autour d'un nouveau tableau d'éléments groupés.

let wrap = (array) => {
  
  array.forEach((elem) => {
    let div = document.createElement('div');
    div.classList.add('slide');
    div.innerHTML = '';

    elem.parentElement.insertBefore(div, elem);
    div.appendChild(elem);
  });
}

wrap(newArr);

Code complet :

const audioBlocks = document.querySelectorAll('.search-audio');
const slider = document.querySelector('.slider');
const audioBlockArr = Array.from(audioBlocks);

function groupBlocks(arr, len) {

  let groups = [],
    i = 0,
    n = arr.length;

  while (i < n) {
    groups.push(arr.slice(i, i += len));
  }

  return groups;
}

newArr = [...groupBlocks(audioBlockArr, 3)];

let wrap = (array) => {
  array.forEach((elem) => {
    let div = document.createElement('div');
    div.classList.add('slide');
    div.innerHTML = '';

    elem.parentElement.insertBefore(div, elem);
    div.appendChild(elem);
  });
}

wrap(newArr);
body {
  font-family: system-ui;
  background: #f06d06;
  color: white;
  text-align: center;
}

.search-audio {
  height: 12rem;
  width: 12rem;
  background: rgb(255, 153, 0);
  margin: .5rem;
  display: inline-block;
}

.slide {
  background-color: #555;
}
<body>
  <div class="slider">
    <div class="search-audio 1"></div>
    <div class="search-audio 2"></div>
    <div class="search-audio 3"></div>
    <div class="search-audio 4"></div>
    <div class="search-audio 5"></div>
    <div class="search-audio 6"></div>
    <div class="search-audio 7"></div>
    <div class="search-audio 8"></div>
    <div class="search-audio 9"></div>
    <div class="search-audio 10"></div>
    <div class="search-audio 11"></div>
    <div class="search-audio 12"></div>
    <div class="search-audio 13"></div>
    <div class="search-audio 14"></div>
    <div class="search-audio 15"></div>
    <div class="search-audio 16"></div>
    <div class="search-audio 17"></div>
    <div class="search-audio 18"></div>
    <div class="search-audio 19"></div>
    <div class="search-audio 20"></div>
  </div>
</body>

</html>

P粉211273535P粉211273535180 Il y a quelques jours274

répondre à tous(2)je répondrai

  • P粉489081732

    P粉4890817322024-04-03 12:01:37

    Je pense que vous compliquez un peu les choses en utilisant CSS pour chaque troisième div utilisant la classe :nth-child.search-audio 的样式应用到 .slide. < /p>

    Ce code est peut-être erroné, mais il ressemble à :

    .slide:nth-child(3n) {
      /* move styles here from .search-audo */
    }
    

    Voici quelques liens qui peuvent être utiles pour apprendre à les utiliser :

    répondre
    0
  • P粉012875927

    P粉0128759272024-04-03 09:47:30

    Le problème est elem 不是单个元素,它是由 groupBlocks() 创建的 3 个元素的数组。所以没有 elem.parentElement.

    Utilisez elem[0].parentElement pour obtenir le parent commun de tous les éléments. Parcourez-les ensuite pour ajouter chaque élément à un nouveau div.

    J'ai modifié elem 重命名为 group dans le code ci-dessous pour qu'il corresponde plus correctement à ce qu'il contient.

    const audioBlocks = document.querySelectorAll('.search-audio');
    const slider = document.querySelector('.slider');
    const audioBlockArr = Array.from(audioBlocks);
    
    function groupBlocks(arr, len) {
    
      let groups = [],
        i = 0,
        n = arr.length;
    
      while (i < n) {
        groups.push(arr.slice(i, i += len));
      }
    
      return groups;
    }
    
    newArr = [...groupBlocks(audioBlockArr, 3)];
    
    let wrap = (array) => {
      array.forEach((group) => {
        let div = document.createElement('div');
        div.classList.add('slide');
        div.innerHTML = '';
    
        group[0].parentElement.insertBefore(div, group[0]);
        group.forEach(elem => div.appendChild(elem));
      });
    }
    
    wrap(newArr);
    body {
      font-family: system-ui;
      background: #f06d06;
      color: white;
      text-align: center;
    }
    
    .search-audio {
      height: 12rem;
      width: 12rem;
      background: rgb(255, 153, 0);
      margin: .5rem;
      display: inline-block;
    }
    
    .slide {
      background-color: #555;
    }
    
      

    répondre
    0
  • Annulerrépondre