1

我有一个注释列表，这些注释从模型发布到视图并发布到页面

 <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 函数，它需要一个按钮 onclick 并将顺序翻转为升序。有没有办法轻松完成？我找不到答案。

4

2 回答 2

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>
于 2013-07-09T14:55:50.920 回答
0

好吧，如果您将它们发布在表格中而不是 div 中，并且您要排序的内容是其中一列，那么 jquery tablesorter 插件会立即吸引您。无论如何，这是一个很好的学习。

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

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

我希望你觉得这有帮助。

于 2013-07-09T14:24:27.037 回答