javascript - Jquery Div 排序和顺序 =)

Question

我遇到的问题是我需要将某些 div 组合在一起并重新排序，如果全部都是动画那就太酷了。请看下面:

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

所以我更需要将 id 按以下顺序分组在一起: 1.在线 2.离开 3.离线

所以:

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

我似乎无法理解这个=(。

我在网站的其余部分使用 Jquery。

任何想法 =)，干杯，Sam T

Answer 1

首先，让我们摆脱这些 ID(ID 必须是唯一的!)，并使用有效 HTML 的类，如下所示:

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

然后您可以使用 .appendTo() 轻松对它们进行排序，像这样:

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 ，这假设一个简单的容器，例如 <div id="users"></div>围绕此内容...只需使用它们所在容器的选择器即可。 ​