javascript - 視覚的な順序で要素のリストを受け取る

Question

次のようなグリッド(divコンテナ)があります:

ただし、div #2 が div #1 の場所にある可能性もあります。これは CSS の位​​置によって行われるため、DOM の順序は同じになります。視覚的な順序を決定したい。これを行う方法はありjQuery selectorますか？

// 回答として追加されたソリューション

Answer 1

$(elem).position()各 div の画面座標を取得するために使用します。topプロパティとプロパティを調べることでleft、視覚的な順序を推測できます。

Answer 2

これが私の解決策です

$("#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')) );

Answer 3

それは不可能だと思います。ただし、次のようないくつかの回避策を使用できます。

1. jQueryscss()関数で div の CSS 位置を確認し、各 div にどのようなスタイルが適用されているかを確認します。その後、それらを配列で並べ替え、それぞれの css 位置で並べ替えます
2. after()要素を CSS で再配置するのremove()ではなく、要素の DOM 位置を実際に変更します。before()
3. position()実際の表示位置を取得するために使用します。これをいくつかの境界に対してチェックし、それらを内部配列でそれらの位置に並べ替えます