Question

I decided that my previous question wasnt perhaps clear in both title and result, so I decided to ask the question like this…

I have 3 categories (A,B,C) and in these categories i have 3 items each. So category A)dog,cat,mouse B)apple,cherry,banana C)red,green,yellow.

I was wondering if its possible to group these items from the categories at random. So for example each time you click on the same button it would group: dog,apple,yellow or cat,cherry,green or mouse,apple,red , etc… and adds the class .grouped or whatever to that group. with only one possible group at a time with three items.

so i guess it would be like from start

class="dog"
class="cat"
class="mouse"
class="apple"
class="cherry"
class="banana"
class="red"
class="green"
class="yellow"

and then you click button & get:

class="dog grouped"
class="apple grouped"
class="yellow grouped"

click button again & get

class="cat grouped"
class="cherry grouped"
class="green grouped"

any thoughts or suggestions greatly appreciated

-david

Answer 1

Its possible as you can see below. There are definitely more elegant ways to do this, but I figured this would be pretty straight forward to understand.

http://jsfiddle.net/EN7HQ/1/

JS

var groupA = ["dog","cat","mouse"],
    groupB = ["apple", "cherry","bannana"],
    groupC = ["red","green","yellow"];

$("#clickme").click(function(){
    $("#groups").children().remove();
    var itemA = groupA[Math.round(Math.random()*2)],
        itemB = groupB[Math.round(Math.random()*2)],
        itemC = groupC[Math.round(Math.random()*2)];

    $("#groups").append("<div class='" + itemA + " grouped'>" + itemA + "</div>"); 
    $("#groups").append("<div class='" + itemB + " grouped'>" + itemB + "</div>"); 
    $("#groups").append("<div class='" + itemC + " grouped'>" + itemC + "</div>"); 
});

Markup

<div id="clickme">Click Me</div>
<div id="groups">
</div>