使用 JS / jQuery 将元素随机分配到 X 个组中答案

【问题标题】：Assign elements randomly into X number of groups using JS / jQuery使用 JS / jQuery 将元素随机分配到 X 个组中
【发布时间】：2018-02-07 04:13:49
【问题描述】：

我有一个包含 216 个圆形元素的 SVG，我的想法是这些圆形在 5 组中随机淡入（大约 4 x 44 和 1 x 40，但每组的数字不需要一成不变） )

即第 1 组在 500 毫秒后淡入，第 2 组在 600 毫秒后淡入等等。

使用 jQuery / JS，创建这 5 个随机组的最佳方法是什么？将它们随机拆分，然后为每个组分配一个类？

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 120">
   <circle r="1" cx="5" cy="5"/>
   <circle r="1" cx="5" cy="15"/>
   <circle r="1" cx="5" cy="25"/>
   <!-- etc etc -->
</svg>

// split all 216 circles from above SVG into 5 groups (how?)
// then fade in groups at different speeds, e.g.:
$('circle.group-1').delay(500).fadeIn();
$('circle.group-2').delay(600).fadeIn();
$('circle.group-3').delay(700).fadeIn();
$('circle.group-4').delay(800).fadeIn();
$('circle.group-5').delay(900).fadeIn();

jsFiddle 在这里：

https://jsfiddle.net/nkvay09x/1/

【问题讨论】：

标签： jquery svg

【解决方案1】：

实现您所需的最简单方法是创建一个包含可能延迟值的数组，循环遍历所有 circle 元素并对 fadeIn() 应用随机延迟。

这不能保证你的 44/40 分割，但效果应该足够随机。试试这个：

var delays = [500, 600, 700, 800, 900];

$('circle').each(function() {
  var rnd = Math.floor(Math.random() * delays.length);
  $(this).delay(delays[rnd]).fadeIn();
})

svg {
  width: 400px;
}

svg circle {
  display: none;
  fill: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 120" preserveAspectRatio="xMinYMin">
  <!-- column 1 -->
  <circle r="1" cx="5" cy="5"/>
  <circle r="1" cx="5" cy="15"/>
  <circle r="1" cx="5" cy="25"/>
  <circle r="1" cx="5" cy="35"/>
  <circle r="1" cx="5" cy="45"/>
  <circle r="1" cx="5" cy="55"/>
  <circle r="1" cx="5" cy="65"/>
  <circle r="1" cx="5" cy="75"/>
  <circle r="1" cx="5" cy="85"/>
  <circle r="1" cx="5" cy="95"/>
  <circle r="1" cx="5" cy="105"/>
  <circle r="1" cx="5" cy="115"/>
  <!-- column 2 -->
  <circle r="1" cx="15" cy="5"/>
  <circle r="1" cx="15" cy="15"/>
  <circle r="1" cx="15" cy="25"/>
  <circle r="1" cx="15" cy="35"/>
  <circle r="1" cx="15" cy="45"/>
  <circle r="1" cx="15" cy="55"/>
  <circle r="1" cx="15" cy="65"/>
  <circle r="1" cx="15" cy="75"/>
  <circle r="1" cx="15" cy="85"/>
  <circle r="1" cx="15" cy="95"/>
  <circle r="1" cx="15" cy="105"/>
  <circle r="1" cx="15" cy="115"/>
  <!-- column 3 -->
  <circle r="1" cx="25" cy="5"/>
  <circle r="1" cx="25" cy="15"/>
  <circle r="1" cx="25" cy="25"/>
  <circle r="1" cx="25" cy="35"/>
  <circle r="1" cx="25" cy="45"/>
  <circle r="1" cx="25" cy="55"/>
  <circle r="1" cx="25" cy="65"/>
  <circle r="1" cx="25" cy="75"/>
  <circle r="1" cx="25" cy="85"/>
  <circle r="1" cx="25" cy="95"/>
  <circle r="1" cx="25" cy="105"/>
  <circle r="1" cx="25" cy="115"/>
  <!-- column 4 -->
  <circle r="1" cx="35" cy="5"/>
  <circle r="1" cx="35" cy="15"/>
  <circle r="1" cx="35" cy="25"/>
  <circle r="1" cx="35" cy="35"/>
  <circle r="1" cx="35" cy="45"/>
  <circle r="1" cx="35" cy="55"/>
  <circle r="1" cx="35" cy="65"/>
  <circle r="1" cx="35" cy="75"/>
  <circle r="1" cx="35" cy="85"/>
  <circle r="1" cx="35" cy="95"/>
  <circle r="1" cx="35" cy="105"/>
  <circle r="1" cx="35" cy="115"/>
  <!-- column 5 -->
  <circle r="1" cx="45" cy="5"/>
  <circle r="1" cx="45" cy="15"/>
  <circle r="1" cx="45" cy="25"/>
  <circle r="1" cx="45" cy="35"/>
  <circle r="1" cx="45" cy="45"/>
  <circle r="1" cx="45" cy="55"/>
  <circle r="1" cx="45" cy="65"/>
  <circle r="1" cx="45" cy="75"/>
  <circle r="1" cx="45" cy="85"/>
  <circle r="1" cx="45" cy="95"/>
  <circle r="1" cx="45" cy="105"/>
  <circle r="1" cx="45" cy="115"/>
  <!-- column 6 -->
  <circle r="1" cx="55" cy="5"/>
  <circle r="1" cx="55" cy="15"/>
  <circle r="1" cx="55" cy="25"/>
  <circle r="1" cx="55" cy="35"/>
  <circle r="1" cx="55" cy="45"/>
  <circle r="1" cx="55" cy="55"/>
  <circle r="1" cx="55" cy="65"/>
  <circle r="1" cx="55" cy="75"/>
  <circle r="1" cx="55" cy="85"/>
  <circle r="1" cx="55" cy="95"/>
  <circle r="1" cx="55" cy="105"/>
  <circle r="1" cx="55" cy="115"/>
  <!-- column 7 -->
  <circle r="1" cx="65" cy="5"/>
  <circle r="1" cx="65" cy="15"/>
  <circle r="1" cx="65" cy="25"/>
  <circle r="1" cx="65" cy="35"/>
  <circle r="1" cx="65" cy="45"/>
  <circle r="1" cx="65" cy="55"/>
  <circle r="1" cx="65" cy="65"/>
  <circle r="1" cx="65" cy="75"/>
  <circle r="1" cx="65" cy="85"/>
  <circle r="1" cx="65" cy="95"/>
  <circle r="1" cx="65" cy="105"/>
  <circle r="1" cx="65" cy="115"/>
  <!-- column 8 -->
  <circle r="1" cx="75" cy="5"/>
  <circle r="1" cx="75" cy="15"/>
  <circle r="1" cx="75" cy="25"/>
  <circle r="1" cx="75" cy="35"/>
  <circle r="1" cx="75" cy="45"/>
  <circle r="1" cx="75" cy="55"/>
  <circle r="1" cx="75" cy="65"/>
  <circle r="1" cx="75" cy="75"/>
  <circle r="1" cx="75" cy="85"/>
  <circle r="1" cx="75" cy="95"/>
  <circle r="1" cx="75" cy="105"/>
  <circle r="1" cx="75" cy="115"/>
  <!-- column 9 -->
  <circle r="1" cx="85" cy="5"/>
  <circle r="1" cx="85" cy="15"/>
  <circle r="1" cx="85" cy="25"/>
  <circle r="1" cx="85" cy="35"/>
  <circle r="1" cx="85" cy="45"/>
  <circle r="1" cx="85" cy="55"/>
  <circle r="1" cx="85" cy="65"/>
  <circle r="1" cx="85" cy="75"/>
  <circle r="1" cx="85" cy="85"/>
  <circle r="1" cx="85" cy="95"/>
  <circle r="1" cx="85" cy="105"/>
  <circle r="1" cx="85" cy="115"/>
  <!-- column 10 -->
  <circle r="1" cx="95" cy="5"/>
  <circle r="1" cx="95" cy="15"/>
  <circle r="1" cx="95" cy="25"/>
  <circle r="1" cx="95" cy="35"/>
  <circle r="1" cx="95" cy="45"/>
  <circle r="1" cx="95" cy="55"/>
  <circle r="1" cx="95" cy="65"/>
  <circle r="1" cx="95" cy="75"/>
  <circle r="1" cx="95" cy="85"/>
  <circle r="1" cx="95" cy="95"/>
  <circle r="1" cx="95" cy="105"/>
  <circle r="1" cx="95" cy="115"/>
  <!-- column 11 -->
  <circle r="1" cx="105" cy="5"/>
  <circle r="1" cx="105" cy="15"/>
  <circle r="1" cx="105" cy="25"/>
  <circle r="1" cx="105" cy="35"/>
  <circle r="1" cx="105" cy="45"/>
  <circle r="1" cx="105" cy="55"/>
  <circle r="1" cx="105" cy="65"/>
  <circle r="1" cx="105" cy="75"/>
  <circle r="1" cx="105" cy="85"/>
  <circle r="1" cx="105" cy="95"/>
  <circle r="1" cx="105" cy="105"/>
  <circle r="1" cx="105" cy="115"/>
  <!-- column 12 -->
  <circle r="1" cx="115" cy="5"/>
  <circle r="1" cx="115" cy="15"/>
  <circle r="1" cx="115" cy="25"/>
  <circle r="1" cx="115" cy="35"/>
  <circle r="1" cx="115" cy="45"/>
  <circle r="1" cx="115" cy="55"/>
  <circle r="1" cx="115" cy="65"/>
  <circle r="1" cx="115" cy="75"/>
  <circle r="1" cx="115" cy="85"/>
  <circle r="1" cx="115" cy="95"/>
  <circle r="1" cx="115" cy="105"/>
  <circle r="1" cx="115" cy="115"/>
  <!-- column 13 -->
  <circle r="1" cx="125" cy="5" />
  <circle r="1" cx="125" cy="15" />
  <circle r="1" cx="125" cy="25" />
  <circle r="1" cx="125" cy="35" />
  <circle r="1" cx="125" cy="45" />
  <circle r="1" cx="125" cy="55" />
  <circle r="1" cx="125" cy="65" />
  <circle r="1" cx="125" cy="75" />
  <circle r="1" cx="125" cy="85" />
  <circle r="1" cx="125" cy="95" />
  <circle r="1" cx="125" cy="105" />
  <circle r="1" cx="125" cy="115" />
  <!-- column 14 -->
  <circle r="1" cx="135" cy="5" />
  <circle r="1" cx="135" cy="15" />
  <circle r="1" cx="135" cy="25" />
  <circle r="1" cx="135" cy="35" />
  <circle r="1" cx="135" cy="45" />
  <circle r="1" cx="135" cy="55" />
  <circle r="1" cx="135" cy="65" />
  <circle r="1" cx="135" cy="75" />
  <circle r="1" cx="135" cy="85" />
  <circle r="1" cx="135" cy="95" />
  <circle r="1" cx="135" cy="105" />
  <circle r="1" cx="135" cy="115" />
  <!-- column 15 -->
  <circle r="1" cx="145" cy="5" />
  <circle r="1" cx="145" cy="15" />
  <circle r="1" cx="145" cy="25" />
  <circle r="1" cx="145" cy="35" />
  <circle r="1" cx="145" cy="45" />
  <circle r="1" cx="145" cy="55" />
  <circle r="1" cx="145" cy="65" />
  <circle r="1" cx="145" cy="75" />
  <circle r="1" cx="145" cy="85" />
  <circle r="1" cx="145" cy="95" />
  <circle r="1" cx="145" cy="105" />
  <circle r="1" cx="145" cy="115" />
  <!-- column 16 -->
  <circle r="1" cx="155" cy="5" />
  <circle r="1" cx="155" cy="15" />
  <circle r="1" cx="155" cy="25" />
  <circle r="1" cx="155" cy="35" />
  <circle r="1" cx="155" cy="45" />
  <circle r="1" cx="155" cy="55" />
  <circle r="1" cx="155" cy="65" />
  <circle r="1" cx="155" cy="75" />
  <circle r="1" cx="155" cy="85" />
  <circle r="1" cx="155" cy="95" />
  <circle r="1" cx="155" cy="105" />
  <circle r="1" cx="155" cy="115" />
  <!-- column 17 -->
  <circle r="1" cx="165" cy="5" />
  <circle r="1" cx="165" cy="15" />
  <circle r="1" cx="165" cy="25" />
  <circle r="1" cx="165" cy="35" />
  <circle r="1" cx="165" cy="45" />
  <circle r="1" cx="165" cy="55" />
  <circle r="1" cx="165" cy="65" />
  <circle r="1" cx="165" cy="75" />
  <circle r="1" cx="165" cy="85" />
  <circle r="1" cx="165" cy="95" />
  <circle r="1" cx="165" cy="105" />
  <circle r="1" cx="165" cy="115" />
  <!-- column 18 -->
  <circle r="1" cx="175" cy="5" />
  <circle r="1" cx="175" cy="15" />
  <circle r="1" cx="175" cy="25" />
  <circle r="1" cx="175" cy="35" />
  <circle r="1" cx="175" cy="45" />
  <circle r="1" cx="175" cy="55" />
  <circle r="1" cx="175" cy="65" />
  <circle r="1" cx="175" cy="75" />
  <circle r="1" cx="175" cy="85" />
  <circle r="1" cx="175" cy="95" />
  <circle r="1" cx="175" cy="105" />
  <circle r="1" cx="175" cy="115" />
</svg>

【讨论】：

对延迟回复表示歉意，但效果很好 - 谢谢！

【解决方案2】：

你可以使用这个技巧：

$(document).ready(function($) {
    var numberOfGroups = 5;
    var numberOfCircles = $('circle').length;
    var groupMinSize = Math.floor(numberOfCircles / numberOfGroups);

    for (var i = 1; i <= numberOfGroups; i++) {
        if (i < numberOfGroups) {
        $('circle:lt(' + (i * groupMinSize) + ')').delay(500 + i * 100).fadeIn();
      } else {
        $('circle:gt(' + ((i - 1) * groupMinSize) + ')').delay(500 + i * 100).fadeIn();
      }
    }
});

demo

【讨论】：

【解决方案3】：

https://jsfiddle.net/nkvay09x/2/

在 1 到 5 之间添加一个组类

var max_groups = 5;
$('circle').each(function() {
    var target_group = Math.floor(Math.random() * max_groups) + 1;

    $(this).attr('class', 'group-'+target_group);
});

【讨论】：