1

Estoy intentando hacer que los div la clase .random se intercambien de posición entre si y que los que tengan la clase .norandom se mantengan en su posición.

$(window).load(function(){
  var cards = $(".random");
  for(var i = 0; i < cards.length; i++){
      var target = Math.floor(Math.random() * cards.length -1) + 1;
      var target2 = Math.floor(Math.random() * cards.length -1) +1;
      cards.eq(target).before(cards.eq(target2));
  }
});
<div class="norandom">
  <div class="name">fijo</div>
  <div class="info">1</div>
</div>
<div class="random">
  <div class="name">lala2</div>
  <div class="info">2</div>
</div>
<div class="random">
  <div class="name">lala3</div>
  <div class="info">3</div>
</div>
<div class="norandom">
  <div class="name">fijo</div>
  <div class="info">4</div>
</div>
<div class="norandom">
  <div class="name">fijo</div>
  <div class="info">5</div>
</div>
<div class="random">
  <div class="name">lala6</div>
  <div class="info">6</div>
</div>
<div class="random">
  <div class="name">lala7</div>
  <div class="info">7</div>
</div>
<div class="norandom">
  <div class="name">fijo</div>
  <div class="info">8</div>
</div>
<div class="norandom">
    <div class="name">lala9</div>
    <div class="info">9 siempre fijo</div>
</div>

El tema es que efectivamente mezcla los con clase .random pero los que tienes class.norandom se mueven igual.

Aca ejemplo http://pruebas.zona8.cl/jaime/randomdivs/

1 respuesta 1

0

Lo que debes hacer no es mover los elementos, es insertar en un índice aleatorio específico el html de otro elemento, obviamente solamente entran los índices de los elementos con clase .random.

Te dejo el ejemplo funcional:

var cards = $(".tarjeta");
var posiciones = [];
var html = [];

// Recorremos todas las tarjetas sin importar la clase
for(var i = 0; i < cards.length; i++){
  if(cards[i].getAttribute('class') == 'random tarjeta'){
    //Capturamos las pociones de los elementos con clase random y lo guardamos en un array
    posiciones.push(cards.index(cards[i]));
    // Campturamos el contenido de los elementos con clase random y lo guardamos en un array
    html.push($(cards[i]).html());
  }
}

//Revolvemos los valores ingresados al array posiciones
posiciones.sort(function() {return Math.random() - 0.5});

//Recorremos el array de posiciones ya con sus valores alterados aleatoriamente, añadimos a la tarjeta en el índice aleatorio el html del índice actual
for(var i = 0; i < posiciones.length; i++){
  $(cards[posiciones[i]]).html(html[i]);
}
.random, .norandom{
    margin: 8px;
    float: left;
    height: 150px;
    width: 221px;
    background-color: rgba(0, 0, 0, .3);
    border-radius: 8px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="contenedor">
  <div class="norandom tarjeta">
       <div class="name">fijo</div>
      <div class="info">1</div>
  </div>
  <div class="random tarjeta">
       <div class="name">lala2</div>
      <div class="info">2</div>
  </div>
  <div class="random tarjeta">
       <div class="name">lala3</div>
      <div class="info">3</div>
  </div>
  <div class="norandom tarjeta">
       <div class="name">fijo</div>
      <div class="info">4</div>
  </div>
  <div class="norandom tarjeta">
       <div class="name">fijo</div>
      <div class="info">5</div>
  </div>
  <div class="random tarjeta">
       <div class="name">lala6</div>
      <div class="info">6</div>
  </div>
  <div class="random tarjeta">
       <div class="name">lala7</div>
      <div class="info">7</div>
  </div>
  <div class="norandom tarjeta">
       <div class="name">fijo</div>
      <div class="info">8</div>
  </div>
  <div class="norandom tarjeta">
       <div class="name">lala9</div>
      <div class="info">9 siempre fijo</div>
  </div>
</div>

2
  • Muchismas gracias!!! Funcionó de maravillas
    – jrami
    el 17 jul. 2019 a las 2:49
  • @jrami me alegra mucho que te funcionara como esperabas, te recomiendo marcar la respuesta como aceptada para finalizar la pregunta y que sirva como ayuda a otros desarrolladores, saludos! el 17 jul. 2019 a las 2:57

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.