基于属性'data-sort'在jQuery中对div进行排序？

Question

如果我有几个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>

我动态创建div:

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

我怎样才能让它们按顺序排列已经加载的div,而不必重新加载所有的div？

我认为我需要在屏幕上构建所有div的数据排序值数组,然后查看新div适合的位置,但我不确定这是否是最好的方法.

Answer 1

使用此功能

   $('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().

由于Chrome中存在错误,您需要"？1:-1",如果没有这个错误,它将不会超过10个div!http://blog.rodneyrehm.de/archives/14-Sorting-Were-Doing-It-Wrong.html

Answer 3

这里回答了同样的问题:

• /sf/answers/1630910081/

重新发布:

在搜索了许多解决方案之后,我决定在博客中介绍如何在jquery中进行排序.总之,按数据属性对jquery"类数组"对象进行排序的步骤......

1. 通过jquery选择器选择所有对象
2. 转换为实际数组(不是类似数组的jquery对象)
3. 对对象数组进行排序
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>

普通的jquery选择器

$('.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>
]

让我们按数据顺序排序

function getSorted(selector, attrName) {
    return $($(selector).toArray().sort(function(a, b){
        var aVal = parseInt(a.getAttribute(attrName)),
            bVal = parseInt(b.getAttribute(attrName));
        return 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>
]

了解getSorted()的工作原理.

希望这可以帮助!