主页 / 问题 / 1248306
Accepted
Oiki
Asked:2022-02-25 04:20:55 +0800 CST2022-02-25 04:20:55 +0800 CST

如何用 div 包装多个元素？

  • 772

我有：

<div id="slider" class="slider">
    <div class="wow-ggg"></div>
    <div class="wow-ggg"></div>
    <div class="wow-ggg"></div>
    <div class="wow-ggg"></div>
    <div class="wow-ggg"></div>
    <div class="wow-ggg"></div>
    <div class="wow-ggg"></div>
    <div class="wow-ggg"></div>
    <div class="wow-ggg"></div>
    <div class="wow-ggg"></div>
</div>

他们有<div class="wow-ggg"></div>一百多个。我需要将它们以不同数量的不同组包装在我的 div 中。

为此，我想使用：

const items = [...document.querySelectorAll('.item')];

const div1 = document.createElement('div');
document.body.append(div1); // вставляем див, куда нужно
div1.append(...items.slice(0, 5));

const div2 = document.createElement('div');
document.body.append(div2); // вставляем див, куда нужно
div2.append(...items.slice(5, 10));

..... 等等

但它适用于没有 DASH 的类。也就是说，对于.item，并且我有一个类.wow-item，即 由于这个“连字符”，一切都中断了。如何处理？

如何使脚本适应我的 html？

javascript

1 个回答

  1. Best Answer

    一切正常：

    const items = [...document.querySelectorAll('.wow-ggg')];

const div1 = document.createElement('div');
div1.classList.add('test');
document.body.append(div1); // вставляем див, куда нужно
div1.append(...items.slice(0, 5));

const div2 = document.createElement('div');
div2.classList.add('test');
document.body.append(div2); // вставляем див, куда нужно
div2.append(...items.slice(5, 10));
    .test {
   border: 1px solid red;
   margin: 2px;
}

.wow-ggg {
  width: 20px;
  height: 20px;
  border: 1px solid black;
  margin: 2px;
}
    <div id="slider" class="slider">
    <div class="wow-ggg"></div>
    <div class="wow-ggg"></div>
    <div class="wow-ggg"></div>
    <div class="wow-ggg"></div>
    <div class="wow-ggg"></div>
    <div class="wow-ggg"></div>
    <div class="wow-ggg"></div>
    <div class="wow-ggg"></div>
    <div class="wow-ggg"></div>
    <div class="wow-ggg"></div>
</div>

    • 0

相关问题