根据属性“数据sorting”在JQuery中sortingDiv？

如果我有几个div：

<div data-sort='1'>div1</div> <div data-sort='4'>div4</div> <div data-sort='8'>div8</div> <div data-sort='12'>div12</div> <div data-sort='19'>div19</div> 

而我dynamic创builddivs：

 <div data-sort='14'>div1</div> <div data-sort='6'>div1</div> <div data-sort='9'>div1</div> 

我怎么才能让他们只是sorting到已经加载的div，而不必重新加载所有的div？

我认为我需要在屏幕上构build所有div的数据sorting值的数组，然后看看新的div适合在哪里，但我不确定这是否是最好的方法。

任何帮助表示赞赏

Answer 1

使用这个function

  $('div').sort(function (a, b) { var contentA =parseInt( $(a).attr('data-sort')); var contentB =parseInt( $(b).attr('data-sort')); return (contentA < contentB) ? -1 : (contentA > contentB) ? 1 : 0; }) 

你可以在添加新的div之后调用这个函数

Answer 2

我把它变成了一个jQuery函数：

 jQuery.fn.sortDivs = function sortDivs() { $("> div", this[0]).sort(dec_sort).appendTo(this[0]); function dec_sort(a, b){ return ($(b).data("sort")) < ($(a).data("sort")) ? 1 : -1; } } 

所以你有一个像“#boo”这样大的div，并且里面有你所有的小div：

$（ “＃嘘”）sortDivs（）。

你需要“？1：-1”，因为Chrome中存在一个错误，没有这个，就不能sorting超过10个div！ http://blog.rodneyrehm.de/archives/14-Sorting-Were-Doing-It-Wrong.html

Answer 3

在这里回答同样的问题：

• https://stackoverflow.com/a/23298715/1007358

重新发布：

在search了很多解决scheme之后，我决定写一些关于如何在jquery中进行sorting的博客[1]。 总之，通过数据属性sortingjquery“类似数组”的对象的步骤…

1. 通过jqueryselect器select所有的对象
2. 转换为实际的数组（不是数组式的jquery对象）
3. sorting对象的数组
4. 用dom对象数组转换回jquery对象

HTML

  <div class =“item”data-order =“2”> 2 </ div>
 <div class =“item”data-order =“1”> 1 </ div>
 <div class =“item”data-order =“4”> 4 </ div>
 <div class =“item”data-order =“3”> 3 </ div> 

简单的jQueryselect器

  > $（'。item'）
 [<div class =“item”data-order =“2”> 2 </ div>，
  <div class =“item”data-order =“1”> 1 </ div>，
  <div class =“item”data-order =“4”> 4 </ div>，
  <div class =“item”data-order =“3”> 3 </ div>
 ] 

让我们按数据顺序sorting

 函数getSorted（select器，attrName）{
    返回$（$（selector）.toArray（）。sort（function（a，b）{
         var aVal = parseInt（a.getAttribute（attrName）），
             bVal = parseInt（b.getAttribute（attrName））;
        返回aVal  -  bVal;
     }））;
 } 

  > getSorted（'。item'，'data-order'）
 [<div class =“item”data-order =“1”> 1 </ div>，
  <div class =“item”data-order =“2”> 2 </ div>，
  <div class =“item”data-order =“3”> 3 </ div>，
  <div class =“item”data-order =“4”> 4 </ div>
 ] 

希望这可以帮助！

[1] http://blog.troygrosfield.com/2014/04/25/jquery-sorting/

Answer 4

你可以尝试jQuery，有一个很好的sorting插件可用。

http://james.padolsey.com/javascript/sorting-elements-with-jquery/

Answer 5

我用这个来sorting一个图像库，其中的sort数组将被ajax调用改变。 希望对某人有用。

 var myArray = ['2', '3', '1']; var elArray = []; $('.imgs').each(function() { elArray[$(this).data('image-id')] = $(this); }); $.each(myArray,function(index,value){ $('#container').append(elArray[value]); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <div id='container'> <div class="imgs" data-image-id='1'>1</div> <div class="imgs" data-image-id='2'>2</div> <div class="imgs" data-image-id='3'>3</div> </div>