简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
每 3 個元素包裹一個父元素
P粉211273535
P粉211273535 2024-04-02 13:11:31
0
2
267

我只是想用一類搜尋音訊將一個 div 與幻燈片類別包裹在每 3 個 div 周圍。

我遇到的一個錯誤是它說 elem.parentElement 未定義...

所以這部分效果很好......

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)];

問題就在這裡 - 將一個 div 包裹在新的分組元素數組周圍。 

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);

完整程式碼：

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粉211273535
P粉211273535

全部回覆(2)
P粉489081732
P粉4890817322024-04-03 12:01:37 2樓

我認為你有點過於複雜了，可以透過使用:nth-child 將.search-audio 的樣式應用到.slide 類別的每個第三個div 來使用CSS。

這段程式碼可能是錯的，但類似於：

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

以下是一些可能有助於學習如何使用它們的連結：

#
點贊 +0
新增回覆
P粉012875927
P粉0128759272024-04-03 09:47:30 1樓

問題是 elem 不是單一元素，它是由 groupBlocks() 建立的 3 個元素的陣列。所以沒有 elem.parentElement。

使用 elem[0].parentElement 取得所有元素的公共父元素。然後循環它們以將每個元素附加到新的 div 中。

我在下面的程式碼中將 elem 重命名為 group，以更正確地匹配它包含的內容。 

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  {
  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;
}
點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！