javascript在DIV中洗牌DIV

我正在开发一个新网站，我们希望使用特定的类shuffle在文档中洗牌一组DIV元素：

(function($){

$.fn.shuffle = function() {

    var allElems = this.get(),
        getRandom = function(max) {
            return Math.floor(Math.random() * max);
        },
        shuffled = $.map(allElems, function(){
            var random = getRandom(allElems.length),
                randEl = $(allElems[random]).clone(true)[0];
            allElems.splice(random, 1);
            return randEl;
       });

    this.each(function(i){
        $(this).replaceWith($(shuffled[i]));
    });

    return $(shuffled);

};

})(jQuery);

我的DIV元素如下所示：

<div class="row animate-in shuffle" data-anim-type="fade-in-up">
            <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
                <div class="team-wrapper">
                    <div class="team-inner" style="background-image: url('assets/img/team/1.jpg')">
                        <!-- <a href="#" target="_blank" > <i class="fa fa-twitter" ></i></a> -->
                    </div>
                    <div class="description">
                        <h3> Test User 1</h3>
                        <h5><strong> Tester - Inhaber </strong></h5>
                        <p>
                            fon: 1234567890<br>
                            <a href="mailto:test@test.de">e-mail: test@test.de</a><br>
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
                <div class="team-wrapper">
                    <div class="team-inner" style="background-image: url('assets/img/team/2.jpg')">
                        <!-- <a href="#" target="_blank" > <i class="fa fa-twitter" ></i></a> -->
                    </div>
                    <div class="description">
                        <h3> Test User 2</h3>
                        <h5><strong> Tester </strong></h5>
                        <p>
                            fon: 0987654321<br>
                            <a href="mailto:tester2@test.de">e-mail: tester2@test.de</a><br>
                        </p>
                    </div>
                </div>
            </div>
         </div>

元素的排列方式仍与在文档中写入元素的方式相同。我的错误在哪里

---

提前感谢：

您可以使用所有元素制作一个数组，然后在单独的函数中渲染它们。此时，您只需要使用如下内容来洗牌数组：

function shuffle(a) {
    for (let i = a.length; i; i--) {
        let j = Math.floor(Math.random() * i);
        [a[i - 1], a[j]] = [a[j], a[i - 1]];
    }
}

---

然后重新渲染父分区。

您可以使用所有元素创建一个数组，然后在单独的函数中渲染它们。此时，您只需要使用如下内容来洗牌数组：

function shuffle(a) {
    for (let i = a.length; i; i--) {
        let j = Math.floor(Math.random() * i);
        [a[i - 1], a[j]] = [a[j], a[i - 1]];
    }
}

---

然后重新渲染父分区。

下面是一个如何解决此问题的示例。 从中学习，并根据自己的情况实施

HTML:

---

下面是一个如何解决这个问题的例子。 从中学习，并根据自己的情况实施

HTML:

---

$'divshuffle div'。shuffle；似乎是针对ID为shuffle的div，但是shuffle是HTML中的一个类。也许可以试试$'div.shuffle div'？克隆元素有一些缺点，比如丢失处理程序，所以在进行洗牌时确实不能采用这种方法。我将给你们一个如何做的例子，但我将使用一个简化的版本，这取决于你们从中学习并实现它。发布为answer.and您肯定不想洗牌。使用此标记洗牌div，更像.shuffle>div。微小更改，主要差异$'divshuffle div'。洗牌；似乎是针对ID为shuffle的div，但是shuffle是HTML中的一个类。也许可以试试$'div.shuffle div'？克隆元素有一些缺点，比如丢失处理程序，所以在进行洗牌时确实不能采用这种方法。我将给你们一个如何做的例子，但我将使用一个简化的版本，这取决于你们从中学习并实现它。发布为answer.and您肯定不想洗牌。使用此标记洗牌div，更像是.shuffle>div。微小更改，主要差异这适用于id=container的1个元素，它始终是第一个返回的元素。如何处理一类元素？同样，选择所有元素，转换为数组，并对其进行forEach。您也可以像我一样将元素随机移动到容器中。这适用于id=container的1个元素，它始终是第一个返回的元素。如何处理一类元素？同样，选择所有元素，转换为数组，并对其进行forEach。你也可以像我一样将元素拖拽到容器中。

<div id="container">
  <div class="shuffleMe"> DIV 1</div>
  <div class="shuffleMe"> DIV 2</div>
  <div class="shuffleMe"> DIV 3</div>
  <div class="shuffleMe"> DIV 4</div>
  <div class="shuffleMe"> DIV 5</div>
  <div class="shuffleMe"> DIV 6</div>
</div>
<button onclick="shuffle()">
  SHUFFLE
</button>

function shuffle() {
  var container = document.getElementById("container");
  var elementsArray = Array.prototype.slice.call(container.getElementsByClassName('shuffleMe'));
    elementsArray.forEach(function(element){
    container.removeChild(element);
  })
  shuffleArray(elementsArray);
  elementsArray.forEach(function(element){
  container.appendChild(element);
})
}

function shuffleArray(array) {
    for (var i = array.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
    return array;
}