Randomize a sequence of div elements with jQuery

Question

Hello all, I'm trying to do my frist steps with jQuery but I have some trouble to understand how to find a list of child elements from a div parent element. I'm used to work with ActionScript 2 and ActionScript 3 so i could mistake some concept, like what is the better way to randomize a sequence of div elements with jQuery!

I have this simple portion 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 have attempted some way to do that like map .member divs in one array and then changing the sort order but without success.

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 attempted to alert element_parent[0] i thought to get the first child of my .member list of divs but it isn't.

if i make an alert 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 the members like this?

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

Answer 1

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

will give you a jQuery object containing <div> that match the selector i.e. div with class member that are descendents of a div with class band.

The jQuery object is an array-like object in that each matched element is assigned a numerical property (think like an index) of the object and a length property is also defined. To get one element is

// 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 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's a plugin I just knocked up

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

Here's a Working Demo. add /edit to the URL to see the code. If you need any details about how it works, please leave a comment. It could probably do with being made more robust to handle certain situations (like if there are other child elems of the jQuery object the plugin is chianed to) but it'll suit your needs.

Code from the 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

Rebecca Murphey has posted a script to randomly re-order child elements. (Is that what you were asking for?)

Answer 3

Thanks for the fastness and this various ways to get the selected children, I'll take a note of these ways for the future!
I tried this methods, but it seems I couldn't get the entire div (please tell'me if i mistake something, it' could be too much possible!!).

I shoud get this content:

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

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

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

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

Answer 4

Hey thanks for the link, I'll take a look, It seems to be exactly what I'm looking for!

Answer 5

Simply perfect. :D

Thanks Russ Cam. :)