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
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.