jquery 将父DIV与其各自的子DIV混洗

nue99wik 于 2023-01-25 发布在 jQuery

关注(0)|答案(1)|浏览(122)

我有一个没有解决方案的情况。在我的网站上，我有一个商业伙伴的画廊。我不想让他们认为第一个比最后一个更好，所以我有这个代码来打乱项目的顺序，每次页面加载。
图库结构遵循此DIVS结构：

我使用的脚本如下：

$(document).ready( function() {
    $(function () {
      var parent = $('.ba-feature-grid-layout');
      var divs = parent.children();
      while (divs.length) {
        parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
      }
    });
});

它的工作，但混乱的所有信息（儿童部门的）。标志的合作伙伴出现与另一个和链接到网站也混淆。任何想法来纠正这一点？

jquery

来源：https://stackoverflow.com/questions/75203733/shuffle-parent-divs-with-their-respective-children-divs

1条答案

按热度按时间

7z5jn7bk1#

您可以使用Fisher-Yates shuffle algorithm来移动元素集合。

使用.find()获取子元素
Shuffle
. append（）将它们返回到$parent中

const fisherYatesShuffle = arr => {
  for (let i = arr.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [arr[i], arr[j]] = [arr[j], arr[i]];
  }
  return arr;
};

jQuery($ => { // DOM ready and $ alias in scope

  $('.ba-feature-grid-layout').each((i, el) => {
    const $this = $(el);
    const $boxes = $this.find(".ba-feature-box");
    const bosesShuffled = fisherYatesShuffle($boxes);
    $this.append(bosesShuffled);
  });

});

.ba-feature-grid-layout { padding: 1rem;}

<div class="ba-feature-grid-layout">
  <div class="ba-feature-box">Lorem</div>
  <div class="ba-feature-box">Ipsum</div>
  <div class="ba-feature-box">Dolor</div>
  <div class="ba-feature-box">Sit</div>
  <div class="ba-feature-box">Amet</div>
</div>

<div class="ba-feature-grid-layout">
  <div class="ba-feature-box">One</div>
  <div class="ba-feature-box">Two</div>
  <div class="ba-feature-box">Three</div>
  <div class="ba-feature-box">Four</div>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

赞(0）回复(0）举报 2023-01-25

我来回答

jquery 将父DIV与其各自的子DIV混洗

1条答案

相关问题

热门标签

最新问答