JQuery特定の行の後ろにあるすべてのdivを選択します（divはランダムな順序で絶対配置されます）

Question

私は同じサイズの絶対配置されたdivのグリッドを持ち、現在は構造columnXとrowYを使用してクラスを持っています。ここで、XとYはdiv位置に対応する変数です。

したがって、4列目と1行目のdivは、クラスに属性値としてこれら2つのクラスcolumn4とrow1を持ちます。私はソリューションの一部としてdiv構造について何かを変更することができます。

<div id="container"> 
<div id="div3-2" class="column3 row2"></div><div id="div1-1" class="column1 row1"></div> 
<div id="div2-3" class="column2 row3"></div><div id="div1-2" class="column1 row2"></div> 
<div id="div2-1" class="column2 row1"></div><div id="div2-2" class="column2 row2"></div> 
<div id="div3-1" class="column3 row1"></div><div id="div1-3" class="column1 row3"></div> 
<div id="div1-2" class="column1 row2"></div><div id="div3-3" class="column3 row3"></div> 
</div> 

私はそこに多くのdivがあると私はゆっくりとしたプロセスをしたくない行1後の行にあるすべてのdiv要素を選択します。既存のdivをすべて選択してから、1より大きい数値のクラス属性を調べて解析する必要がなく、より簡単で効率的な方法がありますか？

.nextAll()のdivのランダムな絶対配置のため、非常に便利な作業であるはずですのでご注意ください。

更新日：私が現在持っている最良の回答をご覧くださいhere。私はこれを行うより効率的な方法があると確信しています。

Answer 1

単項でエンコードされた数字（3が111、7が1111111など）で行と列のデータ属性を設定した場合、 "から始まる" ^=演算子を使用して、より大きな属性を持つ要素を選択できます。

// example, select all divs after row 2 column 2 
 
// so two selectors, one selects divs on row 2 after column 2, the other selects all divs in rows 3, 4, etc They are or'd together 
 

 
function selectAfter(row, col) { 
 
    var selector; 
 
    if (row > 0 && col > 0) { 
 
    var r = Array(row + 1).join("1"); 
 
    var c = Array(col + 1).join("1"); 
 
    
 
    selector = "#container div[data-row='" + r + "'][data-column^='" + c + "1'], #container div[data-row^='" + r + "1']"; 
 
    } else { 
 
    selector = "#container div"; 
 
    } 
 
    
 
    // from here down can be replaced with 
 
    // $(selector).addClass("selected"); 
 
    // if using jquery 
 
    var divs = document.querySelectorAll(selector); 
 

 
    for (var i=0; i < divs.length; i++) { 
 
    divs[i].className += " selected"; 
 
    } 
 
} 
 

 
selectAfter(2, 2);

#container { 
 
    height: 150px; 
 
    width: 150px; 
 
    background-color: grey; 
 
    position: relative; 
 
} 
 

 
#container div { 
 
    height: 50px; 
 
    width: 50px; 
 
    position: absolute; 
 
} 
 
.selected { 
 
    background-color: green; 
 
} 
 
.column2 { left: 50px; } 
 
.column3 { left: 100px; } 
 
.row2 { top: 50px; } 
 
.row3 { top: 100px; }

<div id="container"> 
 
<div class="column3 row2" data-row="11" data-column="111"></div><div class="column1 row1" data-row="1" data-column="1"></div> 
 
<div class="column2 row3" data-row="111" data-column="11"></div><div class="column1 row2" data-row="11" data-column="1"></div> 
 
<div class="column2 row1" data-row="1" data-column="11"></div><div class="column2 row2" data-row="11" data-column="11"></div> 
 
<div class="column3 row1" data-row="1" data-column="111"></div><div class="column1 row3" data-row="111" data-column="1"></div> 
 
<div class="column3 row3" data-row="111" data-column="111"></div> 
 
</div>