I wanted to know how to make each page refresh to . class be moved

Question

Example: Normal Order

class 1<br>
class 2<br>
class 3<br>
.<br>
.<br>
.<br>
class10<br>

---

I want to put in alatoria order to each refresh Example:

class 3<br>
class 5<br>
class 1<br>
.<br>
.<br>
.<br>
class4<br>

As class contain images and text and an additional question, will weigh heavily on that?

Answer 1

I made a very simple way to do this. See if it fits your example:

$('.item').each(function(i){
      var rdm = Math.floor(Math.random()*$('.item').length-1)
      $(this).before($('.item').eq(rdm));
})

In case, just change the class .item by desired. To leave only the first item of the class, just do this:

$('.item').not('.item:first').hide();

Demonstration - Jsfiddle

Other option

Ney, correct me if I’m wrong, but your purpose seemed to me to be this: to hide all the elements of a class, but leaving the show only one element and that the choice of this is random. If that’s the case, you can just do it like this:

$(document).ready(function(){
    var rdm = Math.floor(Math.random()*$('.item').length-1)
    $('.item').not($('.item').eq(rdm)).hide();
})

Jsfiddle

In Jsfiddle just give one run that it will change the order randomly.

But for what you have in question, goes the first option. And another thing, to have a better view remove the br.

Answer 2

Example with Jquery:

$().ready(function() {
	str = ".<br>.<br>.<br>";
	e = $("#content").find($("br"));
	p = Math.floor((Math.random() * e.length));
	l = e.length - 1;
	//console.log(e.length, p, l);
	$.each(e, function(key, val){
		//console.log("key "+key, "v: "+val);
		if (key == p)
			(key == l)? $(this).prev().after(str) : $(this).after(str);
	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
class 1<br>
class 2<br>
class 3<br>
class 4<br>
</div>

I tried to do something that was less invasive possible, IE, that did not need to modify the current code.

To make it easier it is only necessary to place the content inside a <div> with an ID, so Jquery knows where to get the elements.

Note also that the script is careful to identify the position returned from randomness. The basic logic is to add elements, but when the position is last <br> (Class4), the elements would be on the back. Therefore, when the position is penultimate or last, it will always result in

class 1<br>
class 2<br>
class 3<br>.<br>.<br>.<br>
class 4<br>

If you want to change this behavior, just change the condition:

(key == l)? $(this).prev().after(str) : $(this).after(str);

Trade for this:

$(this).after(str);

Answer 3

There are some techniques to shuffle an array, my favorite makes use of Array.protorype.sort with Math.random().

Array.prototype.shuffle = function () {
  return this.sort(function () {
    return 0.5 - Math.random();
  });
}

var tmplItem = document.getElementById("tmplItem").content;
for (var indice = 1; indice <= 20; indice++) {
  var card = document.importNode(tmplItem, true).querySelector(".card");
  document.body.appendChild(card);
  
  var text = card.querySelector(".content span");
  card.classList.add("class" + indice);
  text.textContent = "Item " + indice;
}

Array.prototype.shuffle = function () {
  return this.sort(function () {
    return 0.5 - Math.random();
  });
}

//transformar uma NodeList em Array.
var cards = [].slice.call(document.querySelectorAll(".card"));

//Embaralhando o Elementos e reinserindo os eles na pagina.
cards.shuffle().forEach(function (card, item) {  
  document.body.appendChild(card);
});

.card {
  position: relative;
  width: calc(100% - 20px);
  height: 128px;
  box-sizing: border-box;
  margin: 10px;
  
  box-shadow: 0px 0px 5px black;
  background-color: white;
}

.card .icon {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 128px;
  width: 128px;
  
  background-image: url('http://cdn.flaticon.com/svg/34/34239.svg');
  background-size: calc(100% - 10px);
  background-position: center;
  background-repeat: no-repeat;
  border-right: 1px solid gainsboro;
}

.card .content {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 40px;
  left: 128px;
  
}

.card .content span {
  line-height: 88px;
  padding-left: 10px;
  font-size: 24px;
  font-weight: bold;
}

.card .menu {
  position: absolute;
  right: 0px;
  bottom: 0px;
  height: 40px;
  left: 128px;
  border-top: 1px solid gainsboro;
}

<template id="tmplItem">
  <div class="card">
    <div class="icon">

    </div>
    <div class="content">
      <span></span>
    </div>
    <div class="menu">
      
    </div>
  </div>
</template>