从数组

Question

我在尝试构建圣诞日历网站时遇到错误。 我写了一个圣诞日历，基本上每天都是一个按钮。然后我想把所有这些按钮随机拖回到随机行中，这样你就必须积极地去寻找你想要点击的那一天。

现在这种效果很好除了，有时根本没有创建右边的按钮。有时甚至是多个按钮。老实说，我不明白为什么会这样。它只发生在每20次尝试一次。因此，如果你试试这个，请多次尝试，直到看到错误。您将能够在右侧看到一个按钮应该是的间隙，但根本没有创建。

我非常感谢所提供的任何想法/帮助！ 非常感谢你们。

var alleCols = $('.col');
var alleRows = $('.row');

// Die rows leeren
alleRows.empty();

//durch alle cols gehen
var length = alleCols.length;
for(var i = 0; i < length; i++){
  // 24(länge die am anfang vorhanden ist) mal durch das array gehen
  do{
    //einen zufälligen rowindex holen
    var rowindex = Math.floor(Math.random()*alleRows.length);
    //den row mit dem zufällig generierten index ziehen
    var randomrow = alleRows.get(rowindex);
    //falls diese row noch weniger als 6 elemente in sich hat
    if(randomrow.childElementCount < 6){
      //zufälligen colindex holen
      var colindex = Math.floor(Math.random()*alleCols.length);
      //zufällig generierten col ziehen und an die row anhängen
      alleRows.get(rowindex).appendChild(alleCols.get(colindex));
      //zufällig generierten col aus dem array kicken
      alleCols.splice($.inArray(alleCols.get(colindex), alleCols), 1);
    }
    //wiederholen bis man ein randomrow gefunden hat das noch keine 6 elemente in sich hat
  }while(randomrow.childElementCount < 6)

}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

    <div class="row">
        <div class="col s2">
            <button id="eins" class="text">
                EINS
            </button>
        </div>

        <div class="col s2">
            <button id="zwei">
                2
            </button>
        </div>

        <div class="col s2">
            <button id="drei">
                3
            </button>
        </div>

        <div class="col s2">
            <button id="vier" class="text">
                VIER
            </button>
        </div>

        <div class="col s2">
            <button id="fuenf">
                5
            </button>
        </div>

        <div class="col s2">
            <button id="sechs">
                6
            </button>
        </div>
    </div>

    <div class="row">
        <div class="col s2">
            <button id="sieben" class="text">
                SIEBEN
            </button>
        </div>

        <div class="col s2">
            <button id="acht">
                8
            </button>
        </div>

        <div class="col s2">
            <button id="neun">
                9
            </button>
        </div>

        <div class="col s2">
            <button id="zehn" class="text">
                ZEHN
            </button>
        </div>

        <div class="col s2">
            <button id="elf">
                11
            </button>
        </div>

        <div class="col s2">
            <button id="zwoelf" class="text">
                ZWÖLF
            </button>
        </div>

    </div>

    <div class="row">
        <div class="col s2">
            <button id="dreizehn">
                13
            </button>
        </div>

        <div class="col s2">
            <button id="vierzehn" class="text">
                VIERZEHN
            </button>
        </div>

        <div class="col s2">
            <button id="fuenfzehn" class="text">
                FÜNFZEHN
            </button>
        </div>

        <div class="col s2">
            <button id="sechszehn">
                16
            </button>
        </div>

        <div class="col s2">
            <button id="siebzehn" class="text">
                SIEBZEHN
            </button>
        </div>

        <div class="col s2">
            <button id="achtzehn">
                18
            </button>
        </div>

    </div>

    <div class="row">
        <div class="col s2">
            <button id="neunzehn" class="text">
                NEUNZEHN
            </button>
        </div>

        <div class="col s2">
            <button id="zwanzig" class="text">
                ZWANZIG
            </button>
        </div>

        <div class="col s2">
            <button id="einundzwanding">
                21
            </button>
        </div>

        <div class="col s2">
            <button id="zweiundzwanzig">
                22
            </button>
        </div>

        <div class="col s2">
            <button id="dreiundzwanzig">
                23
            </button>
        </div>

        <div class="col s2">
            <button id="vierundzwanzig" class="text">
                VIERUNDZWANZIG
            </button>
        </div>
    </div>

</div>

Answer 1

老实说，我想不出一个解释，但我有另一个建议。

不是为你追加按钮的地方创建随机索引号，而是宁愿在列中对数组进行洗牌，然后将它们附加到常规的for each循环中。

这是一个使用我从another SO question获取的随机播放功能的示例：

var alleCols = $('.col');
var alleRows = $('.row');

//durch alle cols gehen
var length = alleCols.length;

function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

shuffle(alleCols);

var rowIndex = 0;
alleCols.each(function(colIndex){
  if(colIndex >= 6 && colIndex % 6 === 0){
    rowIndex++;
  }
  
  alleRows.eq(rowIndex).append(alleCols.eq(colIndex));
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

    <div class="row">
        <div class="col s2">
            <button id="eins" class="text">
                EINS
            </button>
        </div>

        <div class="col s2">
            <button id="zwei">
                2
            </button>
        </div>

        <div class="col s2">
            <button id="drei">
                3
            </button>
        </div>

        <div class="col s2">
            <button id="vier" class="text">
                VIER
            </button>
        </div>

        <div class="col s2">
            <button id="fuenf">
                5
            </button>
        </div>

        <div class="col s2">
            <button id="sechs">
                6
            </button>
        </div>
    </div>

    <div class="row">
        <div class="col s2">
            <button id="sieben" class="text">
                SIEBEN
            </button>
        </div>

        <div class="col s2">
            <button id="acht">
                8
            </button>
        </div>

        <div class="col s2">
            <button id="neun">
                9
            </button>
        </div>

        <div class="col s2">
            <button id="zehn" class="text">
                ZEHN
            </button>
        </div>

        <div class="col s2">
            <button id="elf">
                11
            </button>
        </div>

        <div class="col s2">
            <button id="zwoelf" class="text">
                ZWÖLF
            </button>
        </div>

    </div>

    <div class="row">
        <div class="col s2">
            <button id="dreizehn">
                13
            </button>
        </div>

        <div class="col s2">
            <button id="vierzehn" class="text">
                VIERZEHN
            </button>
        </div>

        <div class="col s2">
            <button id="fuenfzehn" class="text">
                FÜNFZEHN
            </button>
        </div>

        <div class="col s2">
            <button id="sechszehn">
                16
            </button>
        </div>

        <div class="col s2">
            <button id="siebzehn" class="text">
                SIEBZEHN
            </button>
        </div>

        <div class="col s2">
            <button id="achtzehn">
                18
            </button>
        </div>

    </div>

    <div class="row">
        <div class="col s2">
            <button id="neunzehn" class="text">
                NEUNZEHN
            </button>
        </div>

        <div class="col s2">
            <button id="zwanzig" class="text">
                ZWANZIG
            </button>
        </div>

        <div class="col s2">
            <button id="einundzwanding">
                21
            </button>
        </div>

        <div class="col s2">
            <button id="zweiundzwanzig">
                22
            </button>
        </div>

        <div class="col s2">
            <button id="dreiundzwanzig">
                23
            </button>
        </div>

        <div class="col s2">
            <button id="vierundzwanzig" class="text">
                VIERUNDZWANZIG
            </button>
        </div>
    </div>

</div>