Question

考虑以下代表产品评论的HTML块（为简洁起见省略的内容）：

<div class="reviews">
    <div class="review-item" id="someUniqueIdPerReviewItem">                    
        <div class="review-header">
            <div class="review-user">
            </div>                        
            <div class="review-date">
            </div>
        </div>
        <div class="review-info">
            <div class="review-rating">
            </div>
            <div class="review-message">
            </div>
        </div>
    </div>
</div>

每个产品在"review-item" div中都有"review"个div，因为它有评论。

我使用View中的Razor在MVC中返回此HTML。在将评论传递给我的观点之前，我会按时间顺序在视图的Action Controller中对评论进行排序。

假设我希望为用户提供按其他指标订购评论的工具，例如：日期ASC / DESC，等级ASC / DESC等。在前端实现这一目标的最可靠方法是什么？显然，我想避免对控制器进行AJAX调用，并传递一个“排序参数”，以不同的顺序重新呈现完全相同的内容。

我已经在使用jQuery做一些前端计算，动画等，但我是前端开发的初学者。我猜我可以用jQuery做这样的事情吗？

1. loop through every "review-item" in "reviews" and store it in a collection
2. sort the collection based on a particular property of "review-item"
3. clear the "reviews" div and append the collection to it

如果没有，那么实现这一目标的适当方法是什么？

谢谢！

Answer 1

我建议使用我的repeatable jQuery插件。

随着列表的人口排序

var list = $("ul#people").repeatable(); // declaring the repeatable
    data.sort(sortFunction); // sort the data in the way you want
    list.value = data; // that's data population, sic!

Answer 2

这些论文可能会有所帮助..

http://trentrichardson.com/2013/12/16/sort-dom-elements-jquery/ http://james.padolsey.com/javascript/sorting-elements-with-jquery/

谢谢，Gareth

使用JS / jQuery在前端对HTML div进行排序

2 个答案: