绑定/分离/附加随机函数

Question

我遇到了一段代码（下面是从https://stackoverflow.com/questions/31459832/randomise-and-order-divs-slick-js 提取的）的问题，该代码本质上是为英雄滑块随机化一组幻灯片（使用 slick.js）。这个特殊的 sn-p 随机化幻灯片，但在幻灯片结束时保持最后一张幻灯片的顺序。

让我感到困惑的部分，我确信与我的问题相关的部分是绑定/分离/附加序列。我的目标是将第一张幻灯片放在开头，而不是最后一张幻灯片。 我假设 if 语句应该检查 0，而不是数组长度 1... 如上所述，我的困惑是绑定/分离/追加。

如果有人能阐明我应该前进的方向，将不胜感激。我的 Javascript 有点生疏，我相信你能看出来！

非常感谢。

JJ

$.fn.randomize = function (selector) {
    var $elems = selector ? $(this).find(selector) : $(this).children(),
        $parents = $elems.parent();

    $parents.each(function () {
        $(this).children(selector).sort(function (childA, childB) {
            // * Prevent last slide from being reordered
            if($(childB).index() !== $(this).children(selector).length - 1) {
                return Math.round(Math.random()) - 0.5;
            }

        }.bind(this)).detach().appendTo(this);
    });

    return this;
};



        $('#carousel-hero .carousel-inner').randomize().slick({
            speed: 3000,
            dots: true,
            fade: true,
            autoplay: true,
            autoplaySpeed: 3000,

            prevArrow: '<button type="button" data-role="none" class="carousel-control left slick-prev">Previous</button>',
            nextArrow: '<button type="button" data-role="none" class="carousel-control right slick-next">Next</button>',
        });

    }

Answer 1

我的目标是将第一张幻灯片保持在开头

我建议不要编写一个怪异的“随机化”函数来几乎但不完全随机化一个元素的所有子元素，而是编写一个适当的函数并让代码的不同部分处理特殊要求保留“第一个”元素。

重要的是要知道 DOM 中的一个节点不能同时存在于两个地方。您在一个位置附加的内容将从现在的位置删除。因此，没有必要做任何“分离”体操。只需通过将节点附加到新父级或同一个父级来移动节点，以随机顺序。

所以你的任务变得非常简单易读：

$.fn.randomizeChildren = function () {
    var randomOrder = function () {
        return Math.random() - 0.5;
    };
    return this.each(function () {
        $(this).append( $(this).children().sort(randomOrder) );
    });
};

$("#randomize").click(function () {
    $("ul.random").randomizeChildren().prepend(function () {
        return $(this).find(".first");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tr><td>
    <ul class="random">
      <li class="first">1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li>
    </ul>
  </td><td>
    <ul class="random">
      <li class="first">1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li>
    </ul>
  </td></tr>
</table>

<button id="randomize">Randomize</button>