在jQuery中基于属性“数据排序”对div进行排序?


72

如果我有几个股利:

<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的位置,但是我不确定这是否是最佳方法。

Answers:


110

使用这个功能

   var result = $('div').sort(function (a, b) {

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

   $('#mylist').html(result);

您可以在添加新的div后立即调用此函数。

如果要在div中保留javascript事件,请不要像上面的示例一样使用html replace。而是使用:

$(targetSelector).sort(function (a, b) {
    // ...
}).appendTo($container);

17
这似乎有一个细微的错误,因为它使用.attr('data-sort')代替.data('sort')。如果数据排序值在页面上动态更新,则attr('data-sort')仍将使用原始值。
2013年

1
@AndyB。你确定吗?您能提供一个例子/版本吗?我在这里进行了测试,效果很好:jsfiddle.net/fMe7R/1
danronmoon

2
@danronmoon啊,是的,您说的对-原来我正在设置,.attr然后尝试访问.data这是两件事。
2013年

3
完美的作品。我用它来对一堆包含术语的UL元素进行排序。$("#allTerms>ul").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; }).appendTo($("#allTerms"));
Magali

17
这里只是一个例子。sort方法仅返回排序后的列表,它不会对元素进行排序。您需要通过使用$('#mylist')。html(result);手动添加新列表。
Johncl'7

28

我把它变成了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:

$(“#boo”)。sortDivs();

由于Chrome中存在错误,您需要输入“?1:-1”,否则,它的排序不会超过10个div!http://blog.rodneyrehm.de/archives/14-Sorting-Were-Doing-It-Wrong.html


1
我对@PJBrunets解决方案有疑问。先前位于父div内的div会怎样?据我了解解决方案,难道我们不只是向父级添加越来越多的(排序的)div吗?我们是否不必删除“旧” div?
Michaela.Merz 2014年

@ Michaela.Merz我认为它们已就位,无需删除任何内容。但是自创建函数以来已经有一段时间了,我不记得详细信息了。我将它与被入侵的jquery.vgrid一起使用,就像这样$(“#grid-content”)。sortDivs(); window.vg = $(“#grid-content”)。vgrid();
PJ Brunet 2014年

1
如果您具有动态数据排序属性,请用attr(“ data-sort”)替换data(“ sort”)。效果很好!
dvilla

9

在这里回答了相同的问题:

重新发布:

在搜索了许多解决方案之后,我决定写博客介绍如何在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>
]

让我们按数据顺序对其进行排序

函数getSorted(selector,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>
]

查看getSorted()如何工作。

希望这可以帮助!


0

我用它来对图像库进行排序,其中通过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>

小提琴:http//jsfiddle.net/ruys9ksg/

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.