以可视顺序接收元素列表

Question

我有一个网格（div容器），如下所示：

然而，div＃2可能位于div＃1的位置，依此类推。这是通过CSS位置完成的，因此它们的DOM顺序是相同的。 我想确定他们的视觉顺序。有jQuery selector或其他方式吗？

//作为答案添加的解决方案

Answer 1

使用$(elem).position()获取每个div的屏幕坐标。通过查看top和left属性，您可以推断出视觉排序。

Answer 2

我认为这不可行。但是你可以使用一些解决方法，例如：

1. 使用jQuerys css()函数检查div的CSS位置，并检查每个div应用的样式。之后，将它们重新排序为数组，按各自的css位置排序
2. 实际使用after()，remove()和before()
更改元素的DOM位置，而不是使用CSS重新定位它们
3. 使用position()获取实际可见位置。针对某些边界检查这一点，并将它们在内部数组中重新排序到它们的位置

Answer 3

这是我的解决方案

$("#grid > div.content").sort(function(a,b){

 var atop = $(a).position().top;
 var aleft =  $(a).position().left;
 var btop = $(b).position().top;
 var bleft =  $(b).position().left;

 if(aleft == bleft && atop == btop) return 0;
 else {

      if(atop < btop) return -1
      else if( atop > btop) return 1;                   
      else { // same
           if(aleft < bleft) return -1;
           else return 1;
      }

 }

}).each( console.log($(this).attr('id')) );