Cambiar posiciones de divs jQuery

[John Roronoa]

Amig@s, tengo 10 div con id enumerados del 1 al 10.
#post_div_1
#post_div_2
#post_div_3
......
#post_div_10

Quiero cambiarlos de posición al azar.
Alguien sabe algún truquillo?

 

[devseo]

Ahí lo tienes 😉

HTML

<div id="container">
  <div class="shuffleMe"> DIV 1</div>
  <div class="shuffleMe"> DIV 2</div>
  <div class="shuffleMe"> DIV 3</div>
  <div class="shuffleMe"> DIV 4</div>
  <div class="shuffleMe"> DIV 5</div>
  <div class="shuffleMe"> DIV 6</div>
</div>
<button onclick="shuffle()">
  SHUFFLE
</button>

JS

function shuffle() {
  var container = document.getElementById("container");
  var elementsArray = Array.prototype.slice.call(container.getElementsByClassName('shuffleMe'));
    elementsArray.forEach(function(element){
    container.removeChild(element);
  })
  shuffleArray(elementsArray);
  elementsArray.forEach(function(element){
  container.appendChild(element);
})
}

function shuffleArray(array) {
    for (var i = array.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
    return array;
}

Fuente: https://stackoverflow.com/questions/43979555/javascript-shuffle-divs-within-div

 

[John Roronoa]

Ahí lo tienes 😉

HTML

<div id="container">
  <div class="shuffleMe"> DIV 1</div>
  <div class="shuffleMe"> DIV 2</div>
  <div class="shuffleMe"> DIV 3</div>
  <div class="shuffleMe"> DIV 4</div>
  <div class="shuffleMe"> DIV 5</div>
  <div class="shuffleMe"> DIV 6</div>
</div>
<button onclick="shuffle()">
  SHUFFLE
</button>

JS

function shuffle() {
  var container = document.getElementById("container");
  var elementsArray = Array.prototype.slice.call(container.getElementsByClassName('shuffleMe'));
    elementsArray.forEach(function(element){
    container.removeChild(element);
  })
  shuffleArray(elementsArray);
  elementsArray.forEach(function(element){
  container.appendChild(element);
})
}

function shuffleArray(array) {
    for (var i = array.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
    return array;
}

Fuente: https://stackoverflow.com/questions/43979555/javascript-shuffle-divs-within-div

Literalmente comienza del padre, el codigo que yo manejo tiene un mierd*****, supongo que tendre que ajustar algunas clases y leer dichos divs por clases, ya que el ID tampoco ayuda mucho ya que el numero de divs siempre será diferente.

Igual solo es cuestion de moverle poquito a ese codigo que me pasaste

Gracias bro

 

[devseo]

Literalmente comienza del padre, el codigo que yo manejo tiene un mierd*****, supongo que tendre que ajustar algunas clases y leer dichos divs por clases, ya que el ID tampoco ayuda mucho ya que el numero de divs siempre será diferente.

Igual solo es cuestion de moverle poquito a ese codigo que me pasaste

Gracias bro

Claro, tendrás que ajustarlo a tus necesidades. Pero vamos, el 80% ya lo tienes hecho.

 

[kj2]

Literalmente comienza del padre, el codigo que yo manejo tiene un mierd*****, supongo que tendre que ajustar algunas clases y leer dichos divs por clases, ya que el ID tampoco ayuda mucho ya que el numero de divs siempre será diferente.

Igual solo es cuestion de moverle poquito a ese codigo que me pasaste

Gracias bro

Los IDs se pueden usar igual, solo captura los nodos con querySelectorAll en lugar de getElementsByClassName:

document.querySelectorAll('div[id^=post_div_')

Con eso capturará todos los divs que tengan un ID que comience con "post_div_".

kj

 

[John Roronoa]

Los IDs se pueden usar igual, solo captura los nodos con querySelectorAll en lugar de getElementsByClassName:

document.querySelectorAll('div[id^=post_div_')

Con eso capturará todos los divs que tengan un ID que comience con "post_div_".

kj

y si los ids fueran
#div_1_containerhome
#div_2_containerhome
#div_3_containerhome
...
etc

 

[devseo]

y si los ids fueran
#div_1_containerhome
#div_2_containerhome
#div_3_containerhome
...
etc

Pues así:

document.querySelectorAll("div[id$=_containerhome]");

Siempre que no haya otro id que finalice con "_containerhome". De todas formas, ¿no es más sencillo que añadas una clase a esos divs? ¿O es que no puedes tocar el HTML?

 

[John Roronoa]

Pues así:

document.querySelectorAll("div[id$=_containerhome]");

Siempre que no haya otro id que finalice con "_containerhome". De todas formas, ¿no es más sencillo que añadas una clase a esos divs? ¿O es que no puedes tocar el HTML?

Correcto, no se puede tocar el HTML

 

[Luisin]

Si estas usando Jquery, por que no aprovecharlo.


Es mas, se puede comprimir aun mas usando eq()

 

[John Roronoa]

Si estas usando Jquery, por que no aprovecharlo.


Es mas, se puede comprimir aun mas usando eq()

Gracias. Ya analice todo el código que no puedo tocar, y a pesar de ser un cochinero, encontré un patrón para seleccionar esos divs sin ninguna interferencia de otro elemento similar.
Y si, veo que ese código quedó más compacto. Gracias.

 

[Luisin]

Gracias. Ya analice todo el código que no puedo tocar, y a pesar de ser un cochinero, encontré un patrón para seleccionar esos divs sin ninguna interferencia de otro elemento similar.
Y si, veo que ese código quedó más compacto. Gracias.

Jquery la hace muy simple con los selectores, por ejemplo:

$('#IDPadrecualquiera .claseHijoCualquiera .ClaseNietocualquiera').shuffle();

 

[bits4me]

te hice un pen

 

[John Roronoa]

te hice un pen

De lujo men, se te agradece al 100