Cambiar posiciones de divs jQuery

John Roronoa · 29 Abr 2022

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 · 3 May 2022

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

John Roronoa · 3 May 2022

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

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 · 3 May 2022

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

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

kj2 · 3 May 2022

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

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

John Roronoa · 3 May 2022

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

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

devseo · 3 May 2022

John Roronoa dijo:
y si los ids fueran
#div_1_containerhome
#div_2_containerhome
#div_3_containerhome
...
etc

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?

John Roronoa · 3 May 2022

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?

Correcto, no se puede tocar el HTML

Luisin · 3 May 2022

Si estas usando Jquery, por que no aprovecharlo.

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

John Roronoa · 3 May 2022

Luisin dijo:
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 · 3 May 2022

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.

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

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

bits4me · 3 May 2022

te hice un pen

John Roronoa · 3 May 2022

bits4me dijo:
te hice un pen

De lujo men, se te agradece al 100

Cambiar posiciones de divs jQuery

John Roronoa

devseo

John Roronoa

devseo

kj2

John Roronoa

devseo

John Roronoa

Luisin

John Roronoa

Luisin

bits4me

John Roronoa

Temas similares