使用jquery根据id对动态创建的div进行排序[重复]答案

【问题标题】：Sort dynamically created div based on their id using jquery [duplicate]使用jquery根据id对动态创建的div进行排序[重复]
【发布时间】：2016-02-04 18:30:50
【问题描述】：

根据 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>");

顺序可能会有所不同（它是在 for 循环中使用 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 } );

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

有人可以帮助我..

【问题讨论】：

$('#res div').sort(function(x, y){return $(x).attr('id')-$(y).attr('id') });
我不知道原因.......这个你必须调试。 .append() 可以正常工作。
为什么你不想用javascript做这个？ sort() 方法在 javascript 中可用，在 jQuery 中不可用。
$('#res').html( $('#res > div').sort(function(x,y){return parseInt(x.id) > parseInt(y.id) ? 1 : -1}) );

标签： jquery

【解决方案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 中删除（无论位置如何），然后将其附加回容器元素（这次已排序）

【讨论】：

谢谢 nikhil.. 它真的帮了我..
@next2u - 很高兴为您提供帮助

【解决方案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>

【讨论】：