我試圖對一個div數組進行排序,因此如果a
低於或位於b
的左邊,則a
位於b
之前。Chrome Array.sorting數字出現故障
在CodePen幾個小時後,我意識到,如果陣列的長度爲10個或更多的項目,Chrome將物品出的順序進行排序,至少與該比較功能:
var array = [0,1,2,3,4,5,6,7,8,9,10];
array.sort(function(a, b) {
return -1;
});
鉻返回:
[0, 2, 3, 4, 1, 6, 7, 8, 9, 10, 5]
如果你登錄a和b的排序函數內部,它爲什麼會發生變得很明顯 - 它只是算法使用的Chrome秒。我知道人們使用return a-b等......但是讓我們來看下面的函數......該數組是包含div的jQuery對象。如果a位於b的下方或左側,我想要a來到b之前。任何幫助?
編輯:爲了迴應這裏的一些答案,我重寫函數輸出1
,-1
或0
。不過,我得到了不想要的結果。看看在輸出中,第一個對象的right
屬性大於第二個的left
屬性,並且第一個對象的top
屬性低於第二個的bottom
。根據比較功能,它們應該是相反的順序。
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)
\t return 1;
\t if(a.bottom > b.top || a.left < b.right)
\t \t return -1;
\t return 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 + $(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);
});
}
提供完整的代碼,但是代碼段內,不codepen。 –
請添加原始數據,您喜歡排序。 –
你可以包括'coords'數組和問題的預期結果嗎? – guest271314