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。

任何想法=），干杯，山姆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")​​​​​​​​​​​​​​​​​​​​​​​;
}

您可以在這里嘗試一下 ，這假設一個簡單的容器，例如包裹在此內容周圍的<div id="users"></div> ...只需使用其所在容器的選擇器即可。