javascript - JavaScript 将 div 内容附加到另一个 Div 并根据 Rank 顺序对内容进行排序

Question

我有如下的 HTML 代码。

单击“Click”时，父级 (div class="studentRow" ref="xxxx") 将附加在 (div id="favoriteListContent") 中。

Rank 文本可能包含一些字母。排名应仅使用数字进行排序。如果 Rank 值为 NO，则应最后列出 - 最低排名。

如何根据 (div id="favoriteListContent") 中的 Rank 值对 div 集进行排序？现在，div 是按照它们被点击的顺序显示的。（见演示 http://jsfiddle.net/sunflowersh/YeSvH/11/）

<h2>Favorites</h2>
<div id="favoritesList">    
<div class="studentRow">
    <div class="favRow1"></div>
    <div class="positionRow1">Rank</div>
    <div class="studentRow1">Name</div>
    <div class="todayRow1">Today</div>
    <div class="thruRow1">Thru</div>
    <div class="totalRow1">Total</div>
</div>
<div id="favoriteListContent"></div>
</div>

<div id="studentList">
<h2>List</h2>
<div class="studentRow" ref="1000">
    <div class="favRow1" ref="1000">click</div>
    <div class="positionRow1">1</div>
    <div class="studentRow1">Name A</div>
    <div class="todayRow1">-3</div>
    <div class="thruRow1">F</div>
    <div class="totalRow1">-9</div>
</div>
<div class="studentRow" ref="2000">
    <div class="favRow2" ref="2000">click</div>
    <div class="positionRow2">D2</div>
    <div class="studentRow2">Name B</div>
    <div class="todayRow2">-2</div>
    <div class="thruRow2">F</div>
    <div class="totalRow2">-7</div>
</div>
<div class="studentRow" ref="1050">
    <div class="favRow1" ref="1050">click</div>
    <div class="positionRow1">D2</div>
    <div class="studentRow1">Name C</div>
    <div class="todayRow1">A</div>
    <div class="thruRow1">F</div>
    <div class="totalRow1">-7</div>
</div>
<div class="studentRow" ref="1800">
    <div class="favRow2" ref="1800">click</div>
    <div class="positionRow2">NO</div>
    <div class="studentRow2">Name H</div>
    <div class="todayRow2"></div>
    <div class="thruRow2"></div>
    <div class="totalRow2">+19</div>
</div>
</div>

我想让最终结果像

<h2>Favorites</h2>
<div id="favoritesList">    
<div class="studentRow">
    <div class="favRow1"></div>
    <div class="positionRow1">Rank</div>
    <div class="studentRow1">Name</div>
    <div class="todayRow1">Today</div>
    <div class="thruRow1">Thru</div>
    <div class="totalRow1">Total</div>
</div>
<div id="favoriteListContent">
<div class="studentRow" ref="1000">
    <div class="favRow1" ref="1000">click</div>
    <div class="positionRow1">1</div>
    <div class="studentRow1">Name A</div>
    <div class="todayRow1">-3</div>
    <div class="thruRow1">F</div>
    <div class="totalRow1">-9</div>
</div>
<div class="studentRow" ref="2000">
    <div class="favRow2" ref="2000">click</div>
    <div class="positionRow2">D2</div>
    <div class="studentRow2">Name B</div>
    <div class="todayRow2">-2</div>
    <div class="thruRow2">F</div>
    <div class="totalRow2">-7</div>
</div>
<div class="studentRow" ref="1800">
    <div class="favRow2" ref="1800">click</div>
    <div class="positionRow2">NO</div>
    <div class="studentRow2">Name H</div>
    <div class="todayRow2"></div>
    <div class="thruRow2"></div>
    <div class="totalRow2">+19</div>
</div>
</div>
</div>

并不是

<div class="studentRow" ref="1800">
    <div class="favRow2" ref="1800">click</div>
    <div class="positionRow2">NO</div>
    <div class="studentRow2">Name H</div>
    <div class="todayRow2"></div>
    <div class="thruRow2"></div>
    <div class="totalRow2">+19</div>
</div>
<div class="studentRow" ref="2000">
    <div class="favRow2" ref="2000">click</div>
    <div class="positionRow2">D2</div>
    <div class="studentRow2">Name B</div>
    <div class="todayRow2">-2</div>
    <div class="thruRow2">F</div>
    <div class="totalRow2">-7</div>
</div>
<div class="studentRow" ref="1000">
    <div class="favRow1" ref="1000">click</div>
    <div class="positionRow1">1</div>
    <div class="studentRow1">Name A</div>
    <div class="todayRow1">-3</div>
    <div class="thruRow1">F</div>
    <div class="totalRow1">-9</div>
</div>