shuffle div elements / get a random element

gistfile1.txt

################# vanila javascript ################

<div class="swiper-wrapper" id="banner-swiper-wrapper">
	<div class="img swiper-slide sh"><img src="/static/fuel/images/main/shinhan-190819-01@2x.png" alt=""><img src="/static/fuel/images/main/shinhan-190819-02@2x.png" alt=""></div>
	<div class="img swiper-slide sm"><img src="/static/fuel/images/main/samsung-190819-01@2x.png" alt=""><img src="/static/fuel/images/main/samsung-190819-02@2x.png" alt=""></div>
	<div class="img swiper-slide sh">3</div>
	<div class="img swiper-slide">4</div>
</div>

//배너 랜덤 설정 	
const wrapper = document.querySelector('#banner-swiper-wrapper');
const listAll = wrapper.querySelectorAll('.swiper-slide')
const slides = [].slice.call(wrapper.querySelectorAll('.swiper-slide'));
console.log(Array.isArray(slides))

slides.sort(function (a, b) {return Math.random() - 0.5;});

wrapper.innerHTML = '';
console.log(slides)

for (var i = 0; i < slides.length; ++i) {
    wrapper.appendChild(slides[i]);
}

####################


1. 
var parent = $("#banner-swiper-wrapper");
		    var divs = parent.children('.swiper-slide:not(.swiper-slide-duplicate)');
		    console.log(divs.length)
		    if (divs.length) {
		    	
		    parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
		        
 } 
 
 
 
 2. 
 $.fn.shuffleChildren = function() {
   $.each(this.get(), function(index, el) {
		    	    var $el = $(el);
		    	    var $find = $el.children('.swiper-slide:not(.swiper-slide-duplicate)');

		    	    $find.sort(function() {
		    	      return 0.5 - Math.random();
		    	    });

		    	    $el.empty();
		    	    $find.appendTo($el);
		    	    
  });
};

$("#banner-swiper-wrapper").shuffleChildren();



3. shuffle the array 

function shuffle(array) {
  array.sort(() => Math.random() - 0.5);
}
let arr = [1, 2, 3];
shuffle(arr);
alert(arr);

4. shuffle the Array 2

var a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
alert(a);
a.sort(function (a, b) {return Math.random() - 0.5;});
alert(a);

http://jsfiddle.net/blossom/g5ajz1wt/



5.
<div id="test">
</div>
<div id="test2">
</div>

var shArray=[0,1,2];
shuffle(shArray);
$("#test").text(shArray);

var BannerImg = ["aaa", "bbb", "ccc"];

for (i=0; i< shArray.length; i++) {
	$("#test2").append(BannerImg[shArray[i]]);
}

function shuffle(array) {
  for (let i = array.length - 1; i > 0; i--) {
    let j = Math.floor(Math.random() * (i + 1)); // random index from 0 to i
    [array[i], array[j]] = [array[j], array[i]];
  }  
}




######
https://css-tricks.com/snippets/jquery/shuffle-children/
https://jsfiddle.net/blossom/q863Luj5/
http://jsfiddle.net/blossom/618hjeyu/
https://jsfiddle.net/donghyeok/r7gehy0b/10/

#######

function shuffle(){
	insur.sort(function(){return 0.5-Math.random()});
	
	var html = "";
	for(var i = 0; i < 3; i++){
		var link = "";
		var imgLink = insur[i];
		
		if($(".insurBtns").hasClass("disabled")){
			imgLink += "-disabled"
		}
		
		html += '<li class="' + insur[i] + '">' +
					'<a href="javascript:;">' + 
						'<img src="/static/drivingHabit/images/event/newInsur/' + imgLink + '.png" srcset="/static/drivingHabit/images/event/newInsur/' + imgLink + '@2x.png 2x, /static/drivingHabit/images/event/newInsur/' + imgLink + '@3x.png 3x" alt="" />' + 
					'</a>' + 
				'</li>';
	}
	$(".insurBtns").html(html)
}