Cambiar posiciones de divs jQuery

devseo dijo:

Ahí lo tienes 😉

HTML

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

JavaScript:

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

Hacer clic para expandir...

John Roronoa dijo:

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

Hacer clic para expandir...

John Roronoa dijo:

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

Hacer clic para expandir...

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

kj2 dijo:

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

JavaScript:

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

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

kj

Hacer clic para expandir...

John Roronoa dijo:

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

Hacer clic para expandir...

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

devseo dijo:

Pues así:

JavaScript:

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?

Hacer clic para expandir...

Luisin dijo:

Si estas usando Jquery, por que no aprovecharlo.

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

Hacer clic para expandir...

John Roronoa dijo:

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.

Hacer clic para expandir...

bits4me dijo:

te hice un pen

Hacer clic para expandir...