Randomize a sequence of div elements with jQuery

Question

I am trying to follow my steps with jQuery, but it is hard for me to figure out how to find the list of children from the parent div. I'm used to working with ActionScript 2 and ActionScript 3, so I might be mistaken in some concept, for example, as the best way to randomize a sequence of div elements using jQuery!

I have this simple piece of HTML code:

<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> 

I tried to do this as map .member divs in a single array, and then changed the sort order, but to no avail.

 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")); 

when I tried to notify element_parent [0] , I thought to get the first child of my .member div list, but it is not.

if I make a warning with element_parent [0] .innerHTML , I see that:

 <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> 

Why? How can I do to get exactly one of these members?

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

I'm sure this should be easy, but I just don't know how :(

please, help
thank
Vittorio

---

EDIT:

Thank you for your stability and the various ways you can get your children. I will mark these paths for the future!
I tried these methods, but it seems I could not get the whole div (please let me know if I do something, it could be too much!).

I want to get this content:

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

but with one of the methods like $ ("div.band div.member: eq (2)") or other useful ways, I get the following:

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

so is there a way to get the div .member container in my node?

Answer 1

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

will provide you with a jQuery object containing a <div> that matches the ie div selector with class member , which are descendants of the div with class band .

A jQuery object is an array-like object in which each matched element is assigned a numerical property (as an index) to the object, as well as a length property. To get one item,

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

or

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

Instead of selecting all elements, you can specify to select a specific element according to the position in the DOM. for example

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

or

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

EDIT:

Here is the plugin I just knocked out

 (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); 

Here's a working demo . add / edit to the url to see the code. If you need any information on how this works, leave a comment. This may be due to being more reliable for handling certain situations (for example, if there are other children of the jQuery object to which the plug-in is connected), but it will meet your needs.

Demo Code

 $(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

I modified the Russ Cam solution so that the selector is optional, and this function can be called on several elements of the container, while preserving each randomized parent of the element.

For example, if I wanted to randomize all the LIs in each div '.member', I could call it like this:

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

I could also do it like this:

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

---

Thus, two ways to trigger this:

 $(parent_selector).randomize(child_selector); 

OR

 $(child_selector).randomize(); 

---

Here's the modified code:

 $.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; }; 

reduced:

 $.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

Randomization using sorting does not always randomize items. Better to use a shuffle method similar to the method. How can I shuffle an array?

Here is my updated code

 (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);