javascript - 如何根据 div 内部类的值对 div 进行排序

Question

我的html是这样的:

<div class="comment_div">
      <span class="upvotes">4</span>
</div>

<div class="comment_div">
      <span class="upvotes">7</span>
</div>

<div class="comment_div">
      <span class="upvotes">2</span>
</div>

.upvotes的值是动态的，所以我希望js/jquery根据当时的值对div进行排序。我该怎么做？

Answer 1

您可以执行以下操作:

1. 将所有 div 选择到 JQuery 对象中。
2. 调用 .get()在 JQuery 对象上获取 div 数组。
3. 使用Array.prototype.sort()函数对数组中的 div 进行排序。
4. 通过将 div 数组传递给 $() 创建另一个 JQuery 对象.

代码:

var divs = $('.comment_div').get();
divs.sort(function(div1, div2) {
    function getValue(div) { return parseInt($(div).children('span:first').text(), 10); }
    var val1 = getValue(div1), val2 = getValue(div2);
    return (val1 > val2) ? 1 : ((val1 < val2) ? -1 : 0);
});
var $sortedDivs = $(divs);

jsfiddle

注释:

1. JQuery 有一个 .sort() 函数，但没有文档记录，因此最好不要使用它。
2. 我假设这些值是数字，应该按数字排序，因此您需要将它们转换为数字，否则您会将它们作为字符串排序。