a
がb
の下または左にある場合、a
がb
の前になるように、divの配列を並べ替えようとしていました。Chrome Array.sorting numbers out of order
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]
あなたはログインしている場合、それがなぜ起こるかbがソート関数の内部で、それが明らかになった - それだけで、アルゴリズムのクロムの使用ですs。私は人々がリターンa-bなどを使用することを知っていますが、次の関数に回しましょう...配列はdivを含むjQueryオブジェクトです。 aがbの下か左にあるなら、aの前に来てほしい。どんな助け?
EDIT:ここでの答えに応じて、1
、-1
、または0
のいずれかを出力する関数を書き換えます。それでも、私は望ましくない結果を得る。出力では、最初のオブジェクトのright
プロパティが2番目のleft
プロパティよりも大きく、最初のオブジェクトのtop
プロパティが2番目の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]);
EDIT:私の目的のために回避策を見つけました。私はお互いにアイテムを比較し、垂直方向と、水平順序に基づいてz-index
をインクリメントするforEach
を使用:
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'配列と期待される結果をQuestionに含めることができますか? – guest271314