child - jquery selector
Aleatorice una secuencia de elementos div con jQuery (3)
La aleatorización con ordenación no siempre aleatoriza los elementos. Es mejor usar un método aleatorio como el de ¿Cómo puedo barajar una matriz?
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);
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.
Tengo esta simple porción de código 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>
Intenté hacer algo así como map .member divs en una matriz y luego cambiar el orden 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 intenté alertar a element_parent [0], pensé en obtener el primer hijo de mi lista .member de div pero no es así.
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 de que esto debería ser fácil, pero no sé cómo :(
por favor ayuda
Gracias
vittorio
EDITAR:
Gracias por la solidez y las diversas formas de obtener los niños seleccionados, tomaré nota de estas maneras para el futuro.
Probé este método, pero parece que no pude obtener todo el div (por favor dígame si confundo algo, ¡podría ser demasiado posible!).
Debería obtener este contenido:
<div class="member">
<ul>
<li>Ringo</li>
<li>Starr</li>
</ul>
</div>
pero con uno de estos métodos como $ ("div.band div.member: eq (2)") u otras formas útiles, obtengo esto:
alert ($(''div.band div.member'')[0]);
/* result
<ul>
<li>Ringo</li>
<li>Starr</li>
</ul>
*/
Entonces, ¿ hay alguna manera de obtener el contenedor div .member también en mi nodo?
Modifiqué la solución de Russ Cam para que el selector sea opcional y se pueda invocar la función en múltiples elementos contenedores, mientras se conserva el elemento principal de cada elemento aleatorizado.
Por ejemplo, si quisiera aleatorizar todos los LI dentro de cada div ''.member'', podría llamarlo así:
$(''.member'').randomize(''li'');
Yo también podría hacerlo así:
$(''.member li'').randomize();
Entonces las dos formas de llamar 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;
};
Minificado:
$.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};
$(''div.band div.member'');
le dará un objeto jQuery que contiene <div> que coincide con el selector, es decir, div con member clase que son descendientes de un div con band clase.
El objeto jQuery es un objeto similar a una matriz en el que a cada elemento coincidente se le asigna una propiedad numérica (pensar como un índice) del objeto y también se define una propiedad de 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, puede especificar seleccionar un elemento específico según 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)")
EDITAR:
Aquí hay un plugin que acabo de noquear
(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);
Aquí hay una demostración de trabajo . agregar / editar 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 demostración
$(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>