Question

我有一个从模型发布到视图并发布到页面

的注释列表

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

这些笔记按降序发布我想制作一个javascript或jquery函数，它会点击一个按钮并按顺序翻转。有办法轻松做到吗？我找不到答案。

Answer 1

您可以尝试这样的事情，需要将排序值添加到包含您要排序的数据的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>

Answer 2

好吧，如果你把它们发布在一个表而不是div中，并且你要排序的东西就是其中一个列，那么jquery tablesorter插件会把你挂起来。无论如何，这是一个很好的学习。

备用选项 - 如果您对模型有足够的控制权，则可以按初始顺序发布两次，一次按相反顺序发布。反向订购版本开始隐藏，然后当您按下按钮时，使用jQuery的.show()和.hide()进行交换，这是可见的。

备用选项 - 如果您没有对模型进行该级别的控制，则可以在加载apge后使用jquery遍历div列表，使用选择器获取备注列表，然后使用{ {1}}，.each()和.clone()填充您的反转列表，然后像以前一样使用显示/隐藏按钮。

我希望你觉得这很有用。

如何翻转div标签中项目的排序顺序？

2 个答案: