在jQuery中基于属性“数据排序”对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的位置，但是我不确定这是否是最佳方法。     
2020-05-23 5 条评论
分享

没有找到相关结果

    已邀请:

    断跑胺弄萎

    使用这个功能 
       $(\'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后立即调用此函数     
    2020-05-23 0 0
    分享

    澜悍景哭苟

    我把它变成了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（）; 您需要使用\“？1：-1 \”，因为Chrome中存在一个错误，如果没有此错误，它的排序不会超过10个div！ http://blog.rodneyrehm.de/archives/14-Sorting-Were-Doing-It-Wrong.html     
    2020-05-23 0 0
    分享

    浮凰量

    在这里回答了相同的问题： https://stackoverflow.com/a/23298715/1007358 重新发布： 在搜索了许多解决方案之后，我决定写博客介绍如何对jquery进行排序。总而言之，按数据属性对jquery \“类数组\”对象进行排序的步骤... 通过jQuery选择器选择所有对象 转换为实际数组（不是类似数组的jquery对象） 排序对象数组 用dom对象数组转换回jquery对象 HTML
    2
    1
    4
    3 普通的jQuery选择器 
    $(\'.item\');
    [
    2 ，  
    1 ，  
    4 ，  
    3 ] 让我们按数据顺序对其进行排序 函数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\')
    [
    1 ，  
    2 ，  
    3 ，  
    4 ] 查看getSorted（）如何工作。 希望这可以帮助！     
    2020-05-23 0 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>
    2020-05-23 0 0
    分享
    为什么被折叠? 0 个回复被折叠

    要回复问题请先登录或注册

    或代码 OrCode.com 备案号：粤ICP备15020848号-1
    Escape time: 0.040420055389404