0

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

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

1 Answer 1

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. ​

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

2 Comments

OMG i didnt use ID did I =o.... shame.... =) thanks for this i will try it later =).
@Sam - Welcome :) Be sure to accept answers on this and future questions via the check-mark beside the one that helped :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.