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

您可以执行以下操作：

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

代码：

Map

jsfiddle

注意：

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);函数，但没有记录，因此最好不要使用它。
我认为值是数字，应该按照这样排序，所以你需要将它们转换为数字，否则你将把它们排序为字符串。

Answer 2

您可以尝试以下代码吗？

divArr = $(".comment_div")
divArr.sort(function(a, b) {
        return $(a).find("span").text() > $(b).find("span").text() ? 1: -1;
    })
$("body").append(divArr)

假设你的html采用以下格式;

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

如果你的HTML是动态的，你可以再次重新运行代码片段＆amp;再次以新的价值观来利用div。

jsFiddle链接详细说明以上答案; https://jsfiddle.net/1gn7no8s/

如何根据div中类的值对div进行排序

2 个答案: