Jquery Div sort and order =)

Question

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

While I showed how to do this below, you should generate it in the correct order from the server if at all possible. — Nick Craver
– Nick Craver, Commented Aug 9, 2010 at 14:41

Nick Craver · Accepted Answer · 2010-08-09 14:29:06Z

4

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.

answered Aug 9, 2010 at 14:29

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sam Tassell Over a year ago

OMG i didnt use ID did I =o.... shame.... =) thanks for this i will try it later =).

Nick Craver Over a year ago

@Sam - Welcome :) Be sure to accept answers on this and future questions via the check-mark beside the one that helped :)

Collectives™ on Stack Overflow

Jquery Div sort and order =)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related