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

Question

考虑以下表示产品评论的 HTML block (为简洁起见，省略了内容):

<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" div 中的 "review-item" div 数量与其评论数量相同。

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

假设我想为用户提供按其他指标排序评论的功能，例如日期 ASC/DESC、评级 ASC/DESC 等。在前端执行此操作最可靠的方法是什么？显然，我希望避免对 Controller 进行 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!