Question

我有以下HTML代码。

单击“单击”时，父项（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>

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

0 个答案: