Aleatorizar una secuencia de elementos div con jQuery

Question

Estoy tratando de hacer mis primeros pasos con jQuery pero tengo algunos problemas para entender cómo encontrar una lista de elementos secundarios de un elemento padre div. Estoy acostumbrado a trabajar con ActionScript 2 y ActionScript 3, por lo que podría confundir algún concepto, como cuál es la mejor manera de aleatorizar una secuencia de elementos div con jQuery.

que tienen esta porción de código simple HTML:

<div class="band"> 
    <div class="member"> 
     <ul> 
      <li>John</li> 
      <li>Lennon</li> 
     </ul> 
    </div> 
    <div class="member"> 
     <ul> 
      <li>Paul</li> 
      <li>McCartney</li> 
     </ul> 
    </div> 
    <div class="member"> 
     <ul> 
      <li>George</li> 
      <li>Harrison</li> 
     </ul> 
    </div> 
    <div class="member"> 
     <ul> 
      <li>Ringo</li> 
      <li>Starr</li> 
     </ul> 
    </div> 
</div> 

He intentado alguna manera de hacerlo como un mapa .Miembro divs en una matriz y luego cambiar el orden de clasificación, pero sin éxito.

function setArrayElements (element_parent) { 
    var arr = []; 
    //alert (element_parent[0].innerHTML); 
    for (var i = 0; i < element_parent.children().length; i ++) { 
     arr.push (element_parent[i].innerHTML); 
    } 
} 
setArrayElements($(".band")); 

cuando traté de alertar element_parent [0] pensé para conseguir el primer hijo de mi .Miembro lista de divs pero no lo es.

si hago una alerta con element_parent [0] .innerHTML veo que:

<div class="member"> 
    <ul> 
     <li>John</li> 
     <li>Lennon</li> 
    </ul> 
</div> 
<div class="member"> 
    <ul> 
     <li>Paul</li> 
     <li>McCartney</li> 
    </ul> 
</div> 
<div class="member"> 
    <ul> 
     <li>George</li> 
     <li>Harrison</li> 
    </ul> 
</div> 
<div class="member"> 
    <ul> 
     <li>Ringo</li> 
     <li>Starr</li> 
    </ul> 
</div> 

¿Por qué? ¿Cómo puedo hacer para obtener exactamente uno de los miembros como este?

<div class="member"> 
    <ul> 
     <li>Paul</li> 
     <li>McCartney</li> 
    </ul> 
</div> 

Estoy seguro que esto debe ser fácil pero yo no sé cómo :(

favor ayuda
gracias
Vittorio

---

EDIT:

Gracias por la solidez y varias formas de obtener el seleccionado niños, tomaré nota de estas maneras para el futuro!
Intenté este método, pero parece que no pude obtener todo el div (por favor dígame si confundo algo, ¡podría ser demasiado posible!).

que shoud sale este contenido:

<div class="member"> 
    <ul> 
     <li>Ringo</li> 
     <li>Starr</li> 
    </ul> 
</div> 

pero con uno de estos métodos como $ ("div.member div.band: eq (2)") o las otras formas útiles, me sale esto:

alert ($('div.band div.member')[0]); 
/* result 
<ul> 
    <li>Ringo</li> 
    <li>Starr</li> 
</ul> 
*/ 

Entonces, ¿hay una manera de conseguir el contenedor .Miembro div demasiado en mi nodo?

Answer 1

$('div.band div.member'); 

le dará un objeto jQuery que contiene <div> que coincidan con el selector es decir div con la clase member que son descendientes de un div con la clase band.

El objeto jQuery es un objeto similar a una matriz en el que a cada elemento coincidente se le asigna una propiedad numérica (piense como un índice) del objeto y también se define una propiedad length.Para obtener un elemento es

// first element 
$('div.band div.member')[0]; 

o

// first element 
$('div.band div.member').get(0); 

En lugar de seleccionar todos los elementos, se puede especificar para seleccionar un elemento específico de acuerdo a la posición en el DOM. Por ejemplo

// get the first div with class member element 
$("div.band div.member:eq(0)") 

o

// get the first div with class member element 
$("div.band div.member:nth-child(1)") 

EDIT:

Aquí hay un plugin que simplemente dejó fuera

(function($) { 

$.fn.randomize = function(childElem) { 
    return this.each(function() { 
     var $this = $(this); 
     var elems = $this.children(childElem); 

     elems.sort(function() { return (Math.round(Math.random())-0.5); }); 

     $this.detach(childElem); 

     for(var i=0; i < elems.length; i++) 
     $this.append(elems[i]);  

    });  
} 
})(jQuery); 

Esto es un Working Demo. Agregue /edit a la URL para ver el código. Si necesita detalles sobre cómo funciona, por favor deje un comentario. Probablemente podría ser más robusto para manejar ciertas situaciones (como si hubiera otros elementos elementales del objeto jQuery al que se conecta el complemento) pero se adaptará a sus necesidades.

Código de la demo

$(function() { 

    $('button').click(function() { 
    $("div.band").randomize("div.member"); 
    }); 

}); 

(function($) { 

$.fn.randomize = function(childElem) { 
    return this.each(function() { 
     var $this = $(this); 
     var elems = $this.children(childElem); 

     elems.sort(function() { return (Math.round(Math.random())-0.5); }); 

     $this.remove(childElem); 

     for(var i=0; i < elems.length; i++) 
     $this.append(elems[i]);  

    });  
} 
})(jQuery); 

HTML

<div class="band"> 
    <div class="member"> 
     <ul> 
      <li>John</li> 
      <li>Lennon</li> 
     </ul> 
    </div> 
    <div class="member"> 
     <ul> 
      <li>Paul</li> 
      <li>McCartney</li> 
     </ul> 
    </div> 
    <div class="member"> 
     <ul> 
      <li>George</li> 
      <li>Harrison</li> 
     </ul> 
    </div> 
    <div class="member"> 
     <ul> 
      <li>Ringo</li> 
      <li>Starr</li> 
     </ul> 
    </div> 
</div> 
<button>Randomize</button> 

Answer 2

que modifica solución de Russ Cam modo que el selector es opcional, y la función puede ser llamada en múltiples elementos contenedores, preservando al mismo tiempo cada aleatorizados elemento padre.

Por ejemplo, si quería cambiar aleatoriamente dentro de cada lis de todos '' .Miembro Div, que podría llamar así:

$('.member').randomize('li'); 

yo también podría hacerlo de esta manera:

$('.member li').randomize(); 

---

lo que las dos formas de llamar a esto son las siguientes:

$(parent_selector).randomize(child_selector); 

O

$(child_selector).randomize(); 

---

Aquí está el código modificado:

$.fn.randomize = function(selector){ 
    (selector ? this.find(selector) : this).parent().each(function(){ 
     $(this).children(selector).sort(function(){ 
      return Math.random() - 0.5; 
     }).detach().appendTo(this); 
    }); 

    return this; 
}; 

minified:

$.fn.randomize=function(a){(a?this.find(a):this).parent().each(function(){$(this).children(a).sort(function(){return Math.random()-0.5}).detach().appendTo(this)});return this}; 

Answer 3

aleatorización utilizando una especie no siempre aleatoriamente los elementos. Es mejor utilizar un método aleatorio como el de How can I shuffle an array?

Aquí está mi código actualizado

(function($) { 
    $.fn.randomize = function(childElem) { 
     function shuffle(o) { 
      for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x); 
      return o; 
     }; 
     return this.each(function() { 
      var $this = $(this); 
      var elems = $this.children(childElem); 

      shuffle(elems); 

      $this.detach(childElem); 

      for(var i=0; i < elems.length; i++) { 
       $this.append(elems[i]);  
      } 
     });  
    } 
})(jQuery);