WordPress环境下实现3个容器Div随机插入不重复内容Div

算力阿峰

2026-5-15

解决方案：用jQuery实现随机不重复分配内容到容器

这需求用jQuery来实现真的很顺手，毕竟你已经在WordPress里加载了jQuery，直接上代码加解释：

核心思路

先把所有内容div收集起来，打乱顺序（保证随机性），然后依次把前3个内容div分配给三个容器——这样既满足随机，又不会重复使用内容。

完整代码实现

$(function() {
  // 1. 把所有隐藏的内容div转成数组
  const contentDivs = $('.source').toArray();
  
  // 2. 用Fisher-Yates洗牌算法打乱数组（公平的随机排序）
  for (let i = contentDivs.length - 1; i > 0; i--) {
    const randomIndex = Math.floor(Math.random() * (i + 1));
    // 交换当前元素和随机选中的元素位置
    [contentDivs[i], contentDivs[randomIndex]] = [contentDivs[randomIndex], contentDivs[i]];
  }
  
  // 3. 把打乱后的前3个内容div分别插入到对应容器
  const containers = ['#one', '#two', '#three'];
  containers.forEach((containerSelector, index) => {
    $(containerSelector).append(contentDivs[index]);
  });
});

代码细节解释

$(function() { ... })：这是jQuery的DOM就绪事件，确保页面所有元素加载完成后再执行代码，避免出现找不到容器/内容div的情况。
Fisher-Yates洗牌：比起简单用sort(() => Math.random() - 0.5)，这个算法能保证每个内容div被选中的概率完全均等，不会有随机偏斜的问题。
append()方法：它会把内容div移动到目标容器里，而不是复制——所以原来隐藏父容器里的内容div会脱离隐藏状态，自动显示在目标容器中，完美符合你的需求。