Bind/Detach/Append для функции Randomize

Question

У меня возникли проблемы с куском кода (ниже и вытащил из https://stackoverflow.com/questions/31459832/randomise-and-order-divs-slick-js), который по существу рандомизирует набор слайдов для слайдера героя (с использованием slick.js). Этот конкретный фрагмент рандомизирует слайды, но сохраняет последний слайд по порядку в конце слайд-шоу.

Часть, которая меня сбивает с толку, и часть, которая, я уверен, имеет отношение к моей проблеме, - это последовательность bind/detach/append. Я стараюсь сохранить первый слайд в начале, а не последний слайд на месте в конце. Я предполагаю, что оператор if должен проверять значение 0, а не длину массива-1 ... Путаница для меня - это, как уже упоминалось, bind/detach/append.

Если кто-то может пролить некоторый свет на направление, в котором я должен ехать, он будет очень признателен. Мой 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>