javascript - 按视觉顺序接收元素列表

Question

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

但是，div #2 可能位于 div #1 的位置，依此类推。这是通过 CSS 位置完成的，因此它们的 DOM 顺序将是相同的。我想确定他们的视觉顺序。有没有jQuery selector其他方法可以做到这一点？

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

Answer 1

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

Answer 2

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

1. 使用 jQueryscss()函数检查 div 的 CSS 位置，并检查每个 div 应用的样式。之后，将它们重新排列在一个数组中，按它们各自的 css 位置排序
2. 实际上改变元素的 DOM 位置，而不是使用 CSS 重新定位它们，使用after(),remove()和before()
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')) );