Randomizing jQuery divs

Question

Randomizing jQuery divs

Navigation

#1 by (0 votes)

0

Talk about it!

I have the following code. What I'm trying to do is to display the 6 divs randomly. I've tried to diversify shapes but no results.

If anyone can help, thank you.

PS: I can not put the divs inside HTML, it has to be via jquery.

var dfl1 = '<div class="col-xs-6 thumb">teste 1</div>'
var dfl2 = '<div class="col-xs-6 thumb">teste 2</div>'
var dfl3 = '<div class="col-xs-6 thumb">teste 3</div>'
var dfl4 = '<div class="col-xs-6 thumb">teste 4</div>'
var dfl5 = '<div class="col-xs-6 thumb">teste 5</div>'
var dfl6 = '<div class="col-xs-6 thumb">teste 6</div>'
		
var imagesdfl = [dfl1, dfl2, dfl3, dfl4, dfl5, dfl6];
$(imagesdfl[Math.floor(Math.random() * imagesdfl.length)]).appendTo('#load-content-d');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="load-content-d" class="row thumbs gap-xs">
													
</div>

html jquery

asked by anonymous 28.07.2017 / 22:04

1 answer

Alternate WebBrowser that rotates recent pages Change timestamp field mysql via php

score 0 · Accepted Answer

Using the lodash lib, you just need to do the dynamic sort with the shuffle . See below how it would look:

var dfl1 = $('<div class="col-xs-6 thumb">teste 1</div>');
var dfl2 = $('<div class="col-xs-6 thumb">teste 2</div>');
var dfl3 = $('<div class="col-xs-6 thumb">teste 3</div>');
var dfl4 = $('<div class="col-xs-6 thumb">teste 4</div>');
var dfl5 = $('<div class="col-xs-6 thumb">teste 5</div>');
var dfl6 = $('<div class="col-xs-6 thumb">teste 6</div>');

var arr = [];
arr.push(dfl1, dfl2, dfl3, dfl4, dfl5, dfl6);
arr = _.shuffle(arr);

$("#load-content-d").html(arr);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>


<div id="load-content-d" class="row thumbs gap-xs"></div>

With pure Java Script: Code of draw withdrawn from here .

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;
}

var dfl1 = $('<div class="col-xs-6 thumb">teste 1</div>');
var dfl2 = $('<div class="col-xs-6 thumb">teste 2</div>');
var dfl3 = $('<div class="col-xs-6 thumb">teste 3</div>');
var dfl4 = $('<div class="col-xs-6 thumb">teste 4</div>');
var dfl5 = $('<div class="col-xs-6 thumb">teste 5</div>');
var dfl6 = $('<div class="col-xs-6 thumb">teste 6</div>');

var arr = [];
arr.push(dfl1, dfl2, dfl3, dfl4, dfl5, dfl6);
arr = shuffle(arr);

$("#load-content-d").html(arr);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>


<div id="load-content-d" class="row thumbs gap-xs"></div>