根据属性'data-sort'对jQuery中的div进行排序？

Posted 2023-02-24

【中文标题】根据属性\'data-sort\'对jQuery中的div进行排序？

【英文标题】：Sort divs in jQuery based on attribute 'data-sort'?根据属性'data-sort'对jQuery中的div进行排序？

【发布时间】：2011-09-02 06:53:15

【问题描述】：

如果我有多个 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 的位置，但我不确定这是否是最好的方法。

【参考方案1】：

使用此功能

   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 替换，如上例所示。而是使用：

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

【讨论】：

这似乎有一个微妙的错误，因为它使用.attr('data-sort') 而不是.data('sort')。如果数据排序值在页面上动态更新，attr('data-sort') 仍然使用原始值。

@AndyB。你确定吗？您能否提供发生这种情况的示例/版本？我在这里测试过，效果很好：jsfiddle.net/fMe7R/1

@danronmoon 啊，是的，你是对的 - 原来我是用 .attr 设置的，然后尝试用 .data 访问，这是两个不同的东西。

完美运行。我用它对一堆包含术语的 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"));

这里只是一个例子。 sort 方法只返回排序后的列表，它不会对元素进行适当的排序。您需要手动添加新列表，例如使用 $('#mylist').html(result);

【参考方案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：

$("#boo").sortDivs();

由于 Chrome 中的一个错误，您需要 "? 1 : -1"，否则它不会对超过 10 个 div 进行排序！ http://blog.rodneyrehm.de/archives/14-Sorting-Were-Doing-It-Wrong.html

【讨论】：

我对@PJBrunets 解决方案有疑问。先前位于父 div 中的 div 会发生什么情况？据我了解解决方案，我们不只是向父级添加越来越多（排序的）div吗？我们不需要删除“旧”的 div 吗？

@Michaela.Merz 我认为它们已就地排序，无需删除任何内容。但是我创建这个函数已经有一段时间了，我不记得细节了。我将它与这样的黑客 jquery.vgrid 一起使用 $("#grid-content").sortDivs(); window.vg = $("#grid-content").vgrid();

如果您有动态数据排序属性，请将 data("sort") 替换为 attr("data-sort")。效果很好！

【参考方案3】：

在这里回答了同样的问题：

https://***.com/a/23298715/1007358

转发：

在搜索了许多解决方案后，我决定blog about how to sort in jquery。总之，按数据属性对 jquery“类数组”对象进行排序的步骤...

通过 jquery 选择器选择所有对象 转换为实际数组（不是类似数组的 jquery 对象） 对对象数组进行排序 使用 dom 对象数组转换回 jquery 对象

HTML

2
1
4
3

纯 jquery 选择器

$('.item');

[2, 1, 4, 3 ]

让我们按数据顺序排序

函数 getSorted(selector, attrName) 
    return $($(selector).toArray().sort(function(a, b)
        var aVal = parseInt(a.getAttribute(attrName)),
            bVal = parseInt(b.getAttribute(attrName));
        返回 aVal - bVal；
    ));

> getSorted('.item', 'data-order')

[1, 2, 3, 4 ]

See how getSorted() works.

希望这会有所帮助！

【参考方案4】：

我用它对一个图片库进行排序，其中排序数组将被 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/