Chrome阵列。排序编号 [英] Chrome Array.sorting numbers out of order

查看：80
本文介绍了Chrome阵列。排序编号的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图对一个div数组进行排序，如果 a 在 b 的左边或下面， ， a 位于 b 之前。



在CodePen中，我意识到如果一个数组的长度超过10个或更多，那么Chrome会按顺序排序这些项目，至少使用这个比较函数：

  var array = [0,1,2,3,4,5,6,7,8,9,10]; 
 array.sort（function（a，b）{
 return -1; 
}）;

Chrome返回： 

  [0,2,3,4,1,6,7,8,9,10,5]

查看CodePen



如果您在排序功能中记录a和b，就会明白为什么会发生这种情况 - 这只是Chrome使用的算法。我知道人们使用return a-b等......但是让我们来看下面的函数......该数组是包含div的jQuery对象。如果a位于b的下方或左侧，我想要a来到b之前。任何帮助??



编辑：为了回应这里的一些答案，我重写函数输出 1 ， -1 或 0 。不过，我得到了不想要的结果。看看在输出中，第一个对象的 right 属性大于第二个 left 属性，并且第一个对象的 top 属性低于第二个底部。根据比较函数，它们应该是相反的顺序。



var array = [{bottom：1181.8854675292969，left：23.39583396911621，right：72.39583396911621，top：910.8854675292969，}，{bottom：1181.3750305175781，left：78.39583587646484，right：183.39583587646484，top：1132.3750305175781}，{bottom：1182.6042175292969，left：189.39584350585938，right ：底部：1189.3958435058594，顶部：1021.6042175292969}，{底部：1181.3750305175781，左侧：355.3958435058594，右侧：626.3958435058594，顶部： ：78.39583587646484，right：183.39583587646484，top：1022.020843 5058594}，{底部：1127.0208435058594，左：355.3958435058594，右：460.3958435058594，顶部：1022.0208435058594}，{底部：1127.0208435058594，左：466.3958435058594，右：571.3958435058594，顶部：1022.0208435058594，}，{底部：1016.0208435058594，左：78.39583587646484，右：183.39583587646484，top：911.0208435058594}，{bottom：1016.2395935058594，left：189.39584350585938，right：515.3958435058594，top：800.2395935058594}，{bottom：1016.2395935058594，left：521.3958740234375，right：626.3958740234375，top：800.2395935058594}，{bottom：906.0208435058594，left ：底部：795.0208435058594，左：78.39583587646484，右：183.39583587646484，顶部：690.0208435058594}，{底部： ：794.02084350585 94，left：189.39584350585938，right：404.3958435058594，top：689.0208435058594}，{bottom：794.0208435058594，left：410.3958435058594，right：515.3958435058594，top：689.0208435058594}，{bottom：794.0208435058594，left：521.3958740234375，right：626.3958740234375，right：689.0208435058594} ，{bottom：683.3750152587891，left：78.39583587646484，right：183.39583587646484，top：634.3750152587891}，{bottom：684.6041870117188，left：189.39584350585938，right：349.3958435058594，top：523.6041870117188}，{bottom：684.6041870117188，left：355.3958435058594，right：570.3958435058594， top：523.6041870117188}，{bottom：629.0208435058594，left：23.39583396911621，right：183.3958339691162，top：524.0208435058594}，{bottom：518.2395935058594，left：23.39583396911621，right：128.3958339691162，top：302.2395935058594}，{bottom：517.8854217529297，left：134.39584350585938，右：405.395843 5058594，top：246.8854217529297}，{bottom：518.604175567627，left：411.3958435058594，right：626.3958435058594，top：357.60417556762695}]; array.sort（function（a，b）{if（a.bottom< b.top || a.left> b.right）返回1;如果（a.bottom> b.top || a.left< b.right）返回-1;返回0;}）; console.log（array [4]，array [8]）;

编辑：为我的目的找到解决方法。我使用 forEach 来比较各个项目，然后根据垂直顺序和水平顺序增加 z-index ：

  function setTileZIndex（）{
 var $ tiles = $（'。grid__item__wrap'）; 
 var coords = []; 
 $ tiles.each（function（index）{
 var topLeft = $（this）.offset（）; 
 var obj = {
 bottom：topLeft.top + $（这个）.height（），
 left：topLeft.left，
 top：topLeft.top，
 right：topLeft.left + $（this）.width（），
 $ this：$（this），
z：9999 
}; 
 coords.push（obj）; 
}）; 
 
 coords.forEach（function（a）{
 coords.forEach（function（b）{
 if（a.bottom  bz + = 4; 
 if（a.left> b.right）
 bz + = 1; 
}）
}）; 
 
 coords.forEach（function（elt）{
 elt。$ this.css（'z-index'，elt.z）; 
}）;


解决方案

您的比较函数必须返回：


  • 否定的：当第一个元素应该在第二个元素之前时
  • 零时：元素无关紧要

  • 正面：第二个元素应该在第一个元素之前。

    • >一直返回-1会导致一个随机结果。



    恐怕不可能做你想做的事情，因为比较函数必须一致数组中的所有元素。使用你正在使用的比较函数，可能有 f（a，b）= -1 ，并且 f（b，a）= -1 ，这是不一致的：或者 a 或者 b p>

    I was trying to sort an array of divs so that if a is below or to the left of b, a is before b.

    After a couple hours in CodePen, I realized that if an array is ten or more items in length, Chrome will sort the items out of order, at least with this compare function:

    var array = [0,1,2,3,4,5,6,7,8,9,10];
array.sort(function(a, b) {
        return -1;
});

    Chrome returns:

    [0, 2, 3, 4, 1, 6, 7, 8, 9, 10, 5]

    See on CodePen

    If you log a and b inside the sort function, it becomes obvious why it happens--it's just the algorithm Chrome uses. I know people use return a-b etc ... but let's turn to the following function ... The array is of jQuery objects containing divs. I want a to come before b if a is below or to the left of b. Any help??

    EDIT: In response to some answers here, I rewrite function to output either 1, -1, or 0. Still, I get unwanted results. See how in the output, the first object's right property is greater than the second's left property, and the first object's top property is lower than the second's bottom. According to the compare function, they should be in the opposite order.

    var array = [
  
  {
    bottom:1181.8854675292969,
    left:23.39583396911621,
    right:72.39583396911621,
    top:910.8854675292969,
  },
  
  {
    bottom:1181.3750305175781,
    left:78.39583587646484,
    right:183.39583587646484,
    top:1132.3750305175781
  },
  
  {
    bottom:1182.6042175292969,
    left:189.39584350585938,
    right:349.3958435058594,
    top:1021.6042175292969
  },
  
  {
    bottom:1181.3750305175781,
    left:355.3958435058594,
    right:626.3958435058594,
    top:1132.3750305175781
  },
   
  {
    bottom:1133.2292175292969,
    left:355.3958435058594,
    right:632.3958435058594,
    top:1132.2292175292969
  },
  
  {
    bottom:1127.0208435058594,
    left:78.39583587646484,
    right:183.39583587646484,
    top:1022.0208435058594
  },
  
  {
    bottom:1127.0208435058594,
    left:355.3958435058594,
    right:460.3958435058594,
    top:1022.0208435058594
  },
  
  {
    bottom:1127.0208435058594,
    left:466.3958435058594,
    right:571.3958435058594,
    top:1022.0208435058594,
  },
  
  {
    bottom:1016.0208435058594,
    left:78.39583587646484,
    right:183.39583587646484,
    top:911.0208435058594
  },
  
  {
    bottom:1016.2395935058594,
    left:189.39584350585938,
    right:515.3958435058594,
    top:800.2395935058594
  },
   
  {
    bottom:1016.2395935058594,
    left:521.3958740234375,
    right:626.3958740234375,
    top:800.2395935058594
  },  
  
  {
    bottom:906.0208435058594,
    left:23.39583396911621,
    right:183.3958339691162,
    top:801.0208435058594
  },
  
  {
    bottom:794.6041870117188,
    left:23.39583396911621,
    right:72.39583396911621,
    top:634.6041870117188
  },
  
  {
    bottom:795.0208435058594,
    left:78.39583587646484,
    right:183.39583587646484,
    top:690.0208435058594
  },
  
  {
    bottom:794.0208435058594,
    left:189.39584350585938,
    right:404.3958435058594,
    top:689.0208435058594
  },
  
  {
    bottom:794.0208435058594,
    left:410.3958435058594,
    right:515.3958435058594,
    top:689.0208435058594
  },
  
  {
    bottom:794.0208435058594,
    left:521.3958740234375,
    right:626.3958740234375,
    top:689.0208435058594
  },
  
  {
    bottom:683.3750152587891,
    left:78.39583587646484,
    right:183.39583587646484,
    top:634.3750152587891
  },
  
  {
    bottom:684.6041870117188,
    left:189.39584350585938,
    right:349.3958435058594,
    top:523.6041870117188
  },
  
  {
    bottom:684.6041870117188,
    left:355.3958435058594,
    right:570.3958435058594,
    top:523.6041870117188
  },
  
  {
    bottom:629.0208435058594,
    left:23.39583396911621,
    right:183.3958339691162,
    top:524.0208435058594
  },
    
  {
    bottom:518.2395935058594,
    left:23.39583396911621,
    right:128.3958339691162,
    top:302.2395935058594
  },
  
  {
    bottom:517.8854217529297,
    left:134.39584350585938,
    right:405.3958435058594,
    top:246.8854217529297
  },
  
  {
    bottom:518.604175567627,
    left:411.3958435058594,
    right:626.3958435058594,
    top:357.60417556762695
  }
];

array.sort(function(a, b) {
  if(a.bottom < b.top || a.left > b.right)
	  return 1;
	if(a.bottom > b.top || a.left < b.right)
		return -1;
	return 0;
});

console.log(array[4],array[8]);

    EDIT: Found a workaround for my purposes. I used forEach to compare the items to each other and increment z-index based on vertical and then horizontal order:

    function setTileZIndex() {
        var $tiles = $('.grid__item__wrap');
        var coords = [];
        $tiles.each(function(index) {
            var topLeft = $(this).offset();
            var obj = {
                bottom: topLeft.top + $(this).height(),
                left: topLeft.left,
                top: topLeft.top,
                right: topLeft.left + $(this).width(),
                $this: $(this),
                z: 9999
            };
            coords.push(obj);
        });

        coords.forEach(function(a) {
            coords.forEach(function(b) {
                if (a.bottom < b.top)
                    b.z += 4;
                if (a.left > b.right)
                    b.z += 1;
            })
        });

        coords.forEach(function(elt) {
            elt.$this.css('z-index', elt.z);
        });
    }

    解决方案

    Your compare function must return:

    • negative: when the first element should come before the second
    • zero: when the order between elements doesn't matter
    • positive: when the second element should come before the first.

    Returning always -1 causes a random result.

    I'm afraid it is not possible to do what you are trying to do, because the compare function must be consistent through all elements in the array. With the compare function you are using, it is possible to have f(a, b) = -1, and f(b, a) = -1, which is inconsistent: either a or b should come first.

    这篇关于Chrome阵列。排序编号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆