Question

根据用户ID对动态创建的div进行排序。

我有html结构，如下所示：

<div id="res">
  <div id="3">text 3</div>
  <div id="4">text 4</div>
  <div id="1">text 1</div>
  <div id="2">text 2</div>
</div>

这些html are created dynamically。

$("#res").append("<div id="+i+">text "+i+"</div>");

订单可能会有所不同（在循环中使用 ajax 创建）。 不幸的div会以随机顺序显示。（我不知道原因）。

然而，在将divs追加到res div之后，我决定根据id按正确的顺序对div进行排序。

所以预期的结果应该是：

<div id="res">
  <div id="1">text 1</div>
  <div id="2">text 2</div>
  <div id="3">text 3</div>
  <div id="4">text 4</div>
</div>

我该怎么做？

我试过

$("#resdiv").tsort("",{attr:"id"});

和

$('#res> div').toArray().sort( function(a,b) { a.id - b.id } );

但没有任何效果......

有人可以帮助我......

Answer 1

尝试以下

$("#res div").sort(function (elem1, elem2) {
    return parseInt(elem1.id) > parseInt(elem2.id);
}).each(function () {
    var element = $(this);
    element.remove();
    $(element).appendTo("#res");
});

解释 - 您首先根据id对元素进行排序，然后迭代这些元素，以便首先从html中删除它们（无论位置如何），然后附加它们回到容器元素（这次排序）

Answer 2

您可以使用原生JavaScript sort()

var $res = $('#res');
$('div', $res).sort(function(a, b) {
  return parseInt(a.id, 10) - parseInt(b.id, 10);
}).appendTo($res);
// For updating the order you need to append it, which updates elements order

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="res">
  <div id="3">text 3</div>
  <div id="4">text 4</div>
  <div id="1">text 1</div>
  <div id="2">text 2</div>
</div>

使用jquery

2 个答案: