页面加载时从隐藏.directory随机选.content填充.box的实现问询

思路分析 #

你的想法完全正确，我们只需要通过JavaScript完成以下几个核心步骤：

1. 等页面加载完成后，获取所有隐藏的.content元素和需要填充的.box元素
2. 确定需要选取的内容数量（就是.box的总数）
3. 从所有.content里随机选出对应数量的不重复元素
4. 把选中的内容分别放进每个.box中

完整可运行代码 #

下面是整合了HTML、CSS和JavaScript的完整代码，直接就能用：

HTML

<div class="directory">
  <div class="content">
    <div class="headline">Headline A</div>
    <div class="text">Some kind of Content</div>
  </div>
  <div class="content">
    <div class="headline">Headline B</div>
    <div class="text">Some kind of Content</div>
  </div>
  <div class="content">
    <div class="headline">Headline C</div>
    <div class="text">Some kind of Content</div>
  </div>
  <div class="content">
    <div class="headline">Headline D</div>
    <div class="text">Some kind of Content</div>
  </div>
  <div class="content">
    <div class="headline">Headline E</div>
    <div class="text">Some kind of Content</div>
  </div>
  <div class="content">
    <div class="headline">Headline F</div>
    <div class="text">Some kind of Content</div>
  </div>
</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

CSS

.directory { display: none; }
.content { margin-bottom: 20px; border-bottom: 1px solid black; padding-bottom: 10px; }
.box { border: 1px solid #ddd; padding: 15px; margin: 10px 0; border-radius: 4px; } /* 给盒子加基础样式，方便查看效果 */

JavaScript

// 等待页面DOM完全加载后执行
document.addEventListener('DOMContentLoaded', function() {
  // 获取所有隐藏的.content元素，转成数组方便操作
  const allContents = Array.from(document.querySelectorAll('.directory .content'));
  // 获取所有需要填充的.box元素
  const boxes = document.querySelectorAll('.box');
  const neededCount = boxes.length;

  // 随机挑选不重复的内容
  const selectedContents = [];
  // 复制一份content数组，避免修改原隐藏容器里的元素
  const tempContents = [...allContents];

  for (let i = 0; i < neededCount; i++) {
    // 生成0到当前tempContents长度-1的随机索引
    const randomIdx = Math.floor(Math.random() * tempContents.length);
    // 取出该索引的元素，并从tempContents中移除（避免重复选中）
    const pickedContent = tempContents.splice(randomIdx, 1)[0];
    selectedContents.push(pickedContent);
  }

  // 将选中的内容填充到每个box里
  boxes.forEach((box, idx) => {
    // 深度克隆选中的content元素，保留所有子节点
    const contentClone = selectedContents[idx].cloneNode(true);
    box.appendChild(contentClone);
  });
});

关键代码说明 #

• DOMContentLoaded：保证我们操作DOM的时候，所有元素都已经加载完成，不会出现找不到元素的错误
• Array.from() 和扩展运算符 [...allContents]：把DOM元素集合（NodeList）转换成普通数组，方便使用数组的splice等方法
• splice(randomIdx, 1)：通过删除临时数组里的元素来实现不重复随机选取，每次选完后临时数组长度减一，不会再选到同一个元素
• cloneNode(true)：深度克隆元素，这样原隐藏容器里的.content不会被移走，后续如果有其他需求还能继续复用

不管你隐藏容器里有20个还是更多.content，只要.box的数量少于它，这段代码都能完美工作，每次刷新页面都会随机展示不同的内容组合！

内容的提问来源于stack exchange，提问作者Max Di Campo