Javascript 如何翻转div标签中项目的排序顺序？
我有一个从模型发布到视图并发布到页面的注释列表Javascript 如何翻转div标签中项目的排序顺序？,javascript,jquery,sorting,Javascript,Jquery,Sorting,我有一个从模型发布到视图并发布到页面的注释列表 <div id="listResults"></div> <div class="pam bgpage line" id="navResults"></div> <script id="listTemplate" type="text/x-jquery-template"> <div class="clearfix ptl phl modalRow"> <div cl
<div id="listResults"></div>
<div class="pam bgpage line" id="navResults"></div>
<script id="listTemplate" type="text/x-jquery-template">
<div class="clearfix ptl phl modalRow">
<div class="ui ui_std_${Type} activity_icon"></div>
<div class="activity">
<p class="activity_head">${SubType} ${Type}</p>
<span class="activity_detail">${CreatedDuration} by ${CreatedBy}</span><br />
<div class="activity_wrap">
{{html Note}}
</div>
</div>
</div>
</script>
<script id="navTemplate" type="text/x-jquery-template">
<div class="unit size1of5 lastUnit">
{{if TotalItemCount>0}}
<label class="dgray mlm mrs">1 - ${LastItemOnPage} of ${TotalItemCount}</label>
{{else}}No Recent Activity{{/if}}
</div>
</script>
${SubType}${Type}
${CreatedDuration}由${CreatedBy}创建
{{html注释}
{{如果TotalItemCount>0}}
1-${TotalItemCount}中的${LastItemOnPage}
{{else}最近没有活动{{/if}
这些注释是按降序发布的，我想创建一个javascript或jquery函数，单击按钮并将顺序翻转为升序。有没有一种简单的方法？我找不到答案。好吧，如果您将它们发布在表中而不是div中，并且您正在排序的内容是其中的一列，jquery tablesorter插件会立即将您连接起来。无论如何，这是一个很好的学习方法 备选方案-如果您对模型有足够的控制权，可以发布两次，一次按初始顺序发布，一次按相反顺序发布。将逆序版本开始隐藏，然后当您按下按钮时，使用jQuery的
.show（）.hide（）.each（）.clone（）.insertBefore（）我希望这对您有所帮助。好吧，如果您将它们发布在表中而不是div中，并且您所排序的内容是其中一列，jquery tablesorter插件会立即将您连接起来。无论如何，这是一个很好的学习方法 备选方案-如果您对模型有足够的控制权，可以发布两次，一次按初始顺序发布，一次按相反顺序发布。将逆序版本开始隐藏，然后当您按下按钮时，使用jQuery的
.show（）.hide（）.each（）.clone（）.insertBefore（）我希望这对您有所帮助。您可以尝试类似的方法，需要将排序值添加到包含要排序的数据的div中，并将所有文章包装到容器div中：
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
</head>
<body>
<input type="button" id="test" value="sort"/>
<div id="activitycontent">
<div class="activity" data-sort="22">
<span>22</span>
</div>
<div class="activity" data-sort="11">
<span>11</span>
</div>
<div class="activity" data-sort="33">
<span>33</span>
</div>
</div>
<script type="text/javascript">
(function () {
var direction = 1;
function sortHelper(a, b) {
// this can be made faster if you pre store these values
// retuns 1,-1 or 0 to sort the array of div elements
// using the value of the attribute data-sort
vala = a.getAttribute("data-sort");
valb = b.getAttribute("data-sort");
ret = vala>valb?1:(vala<valb)?-1:0;
// multiply by direction (ascending descending)
return ret * direction;
}
$("#test").on("click", null, null, function () {
// sort opposite of previously used direction.
direction = direction * -1;
// get array of html Div elements containing the article
var divArr = Array.prototype.slice.call
($("#activitycontent div.activity"), 0);
var i = 0;
var container = document.getElementById("activitycontent");
// sort the articles based on data-sort property
divArr.sort(function (a, b) {
return sortHelper(a, b);
});
// add the div elements containing the articles in the right order
for (i = divArr.length-1;i>-1;i--){
container.appendChild(divArr[i]);
}
});
})();
</script>
</body>
</html>
测试
22
11
33
（功能（）{
var方向=1；
功能排序器（a、b）{
//如果预先存储这些值，则可以加快速度
//重新运行1、-1或0对div元素数组进行排序
//使用属性数据排序的值
vala=a.getAttribute（“数据排序”）；
valb=b.getAttribute（“数据排序”）；
ret=vala>valb？1:（vala-1；i--）{
container.appendChild（divArr[i]）；
}
});
})();
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
</head>
<body>
<input type="button" id="test" value="sort"/>
<div id="activitycontent">
<div class="activity" data-sort="22">
<span>22</span>
</div>
<div class="activity" data-sort="11">
<span>11</span>
</div>
<div class="activity" data-sort="33">
<span>33</span>
</div>
</div>
<script type="text/javascript">
(function () {
var direction = 1;
function sortHelper(a, b) {
// this can be made faster if you pre store these values
// retuns 1,-1 or 0 to sort the array of div elements
// using the value of the attribute data-sort
vala = a.getAttribute("data-sort");
valb = b.getAttribute("data-sort");
ret = vala>valb?1:(vala<valb)?-1:0;
// multiply by direction (ascending descending)
return ret * direction;
}
$("#test").on("click", null, null, function () {
// sort opposite of previously used direction.
direction = direction * -1;
// get array of html Div elements containing the article
var divArr = Array.prototype.slice.call
($("#activitycontent div.activity"), 0);
var i = 0;
var container = document.getElementById("activitycontent");
// sort the articles based on data-sort property
divArr.sort(function (a, b) {
return sortHelper(a, b);
});
// add the div elements containing the articles in the right order
for (i = divArr.length-1;i>-1;i--){
container.appendChild(divArr[i]);
}
});
})();
</script>
</body>
</html>
测试
22
11
33
（功能（）{
var方向=1；
功能排序器（a、b）{
//如果预先存储这些值，则可以加快速度
//重新运行1、-1或0对div元素数组进行排序
//使用属性数据排序的值
vala=a.getAttribute（“数据排序”）；
valb=b.getAttribute（“数据排序”）；
ret=vala>valb？1:（vala-1；i--）{
container.appendChild（divArr[i]）；
}
});
})();
data totaldata total