0

As suggested by many, I have taken their advice and reformed my question. I took out a lot of code and have now the bare minimum shown. Hope this is sufficient and clear enough to re-open my question.

I have the following fiddle: http://jsfiddle.net/mauricederegt/vNpYe/5/

With the following HTML:

<div id="main" tabindex="1"> <div class="tile tile1" block-id="1" style-id="1" style="left:0px; top:0px"></div> <div class="tile tile3" block-id="2" style-id="2" style="left:100px; top:0px"></div> <div class="tile tile1" block-id="3" style-id="1" style="left:200px; top:0px"></div> <div class="tile tile2" block-id="4" style-id="2" style="left:350px; top:0px"></div> <div class="tile tile2" block-id="5" style-id="2" style="left:0px; top:100px"></div> <div class="tile tile1" block-id="6" style-id="1" style="left:100px; top:100px"></div> </div>

I am trying to randomize the order off the div's class. So just the class part: class="tile tile1", all other items of the div should remain as is.

Example: The code could look like this after randomizing (note that only the class is shuffled):

<div id="main" tabindex="1"> <div class="tile tile3" block-id="1" style-id="1" style="left:0px; top:0px"></div> <div class="tile tile2" block-id="2" style-id="2" style="left:100px; top:0px"></div> <div class="tile tile1" block-id="3" style-id="1" style="left:200px; top:0px"></div> <div class="tile tile2" block-id="4" style-id="2" style="left:350px; top:0px"></div> <div class="tile tile1" block-id="5" style-id="2" style="left:0px; top:100px"></div> <div class="tile tile1" block-id="6" style-id="1" style="left:100px; top:100px"></div> </div>

​How can I get the div's classes to display in a random order?

Hope the question is more clear now.

Many thanks

Improve this question
5
  • 1
    that is a ridiculous amount of code to review in demo. Especially since you haven't defined what shuffle style even means, or what a layer or level means in context of demo. Demo's should be scaled down to present only enough code to present an issue, not be a whole application. Surely you can remove most of the rendering code and replace with static html, with only enough script to deal with whatever it is you are trying to do Commented Mar 31, 2013 at 21:27
  • I disagree about the amount of code. I fiddled it for extra support. Removing it or the comments in it, would make things more vague. Nevertheless I've found a written mistake. I mend the class of the div, not it's style. Corrected this and added an extra HTML example Commented Apr 1, 2013 at 19:06
  • 1
    @Maurice: If there's a specific action that you'd like to learn how to do in jQuery, present the simplest possible version of the problem. Imagine you're a teacher in the first day of a beginning computer class. How would you present it to the students, so that they understand exactly what the nature of the problem is (before asking them or teaching them how to solve a basic problem of this sort)? That's the way to ask questions on Stackoverflow. Study the problem until you understand it well enough to reduce it to its simplest form. Commented Apr 1, 2013 at 20:18
  • 1
    still have absoluetly no idea what you are wanting to shuffle, source of these classes etc. Explanation is just not clear at all. Disagree all you want but until you can provide simplest demo needed to present issue only, with irrelevant code removed, and a well constructed explanation, doubt you will find much assistance Commented Apr 1, 2013 at 21:28
  • As suggested by many, I have taken their advice and reformed my question. I took out a lot of code and have now the bare minimum shown. Hope this is sufficient and clear enough to re-open my question. Commented Apr 8, 2013 at 21:20

1 Answer 1

Reset to default
1

First, you need an array of the tile classes.

var tiles = [], tile_re = /tile(\d+)/; $('.tile').each(function(i) { tiles[i] = this.className.match(tile_re)[0]; });

Then, you need to shuffle the array of classes:

function shuffle(a) { var t; for (var i = a.length - 1; i > 0; --i) { var p = Math.floor(Math.random() * (i + 1)); if (p !== i) { t = a[i]; a[i] = a[p]; a[p] = t; } } } shuffle(tiles);

Finally, you merge the results back:

$('.tile').each(function(i) { this.className = 'tile ' + tiles[i]; });
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks this works perfectly. I've made a fiddle if others want to see it in action: jsfiddle.net/mauricederegt/EFCex

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.