Jquery Div sort and order =)

Question

Hi All,

The problem i have is i need to group certain divs together and reorder them, and if it was all animating it would be cool. Please see below:

<div id="away">Some Content</div>
<div id="online">Some Content</div>
<div id="offline">Some Content</div>
<div id="away">Some Content</div>
<div id="online">Some Content</div>
<div id="offline">Some Content</div>
<div id="online">Some Content</div>
<div id="online">Some Content</div>
<div id="away">Some Content</div>

So i kinder need to group the id’s together the order by: 1.online 2.away 3.offline

So:

<div id="online">Some Content</div>
<div id="online">Some Content</div>
<div id="online">Some Content</div>
<div id="online">Some Content</div>
<div id="away">Some Content</div>
<div id="away">Some Content</div>
<div id="away">Some Content</div>
<div id="offline">Some Content</div>
<div id="offline">Some Content</div>

I can't seem to get my head arround this one =(.

I'm using Jquery on the rest of the site.

Any ideas =), Cheers, Sam T

Answer 1

First, let's get rid of those IDs (IDs must be unique!), and use a classes for valid HTML, like this:

<div id="users">
  <div class="away">Some Content</div>
  <div class="online">Some Content</div>
  <div class="offline">Some Content</div>
  <div class="away">Some Content</div>
  <div class="online">Some Content</div>
  <div class="offline">Some Content</div>
  <div class="online">Some Content</div>
  <div class="online">Some Content</div>
  <div class="away">Some Content</div>
</div>

Then you could sort them easily using .appendTo(), like this:

var statusOrder = ["online", "away", "offline"];
for(var i=0; i<statusOrder.length; i++) {
    $("#users ." + statusOrder[i]).appendTo("#users")​​​​​​​​​​​​​​​​​​​​​​​;
}

You can give it a try here, this assumes a simple container, like <div id="users"></div> wrapped around this content...just use the selector of whatever container they're in. ​