JQuery選擇某一行後的所有div（div是隨機排列的，絕對定位的）

Question

我有一個絕對等大小的網格隨機排列的div，目前它們使用的結構類型爲columnX和rowY。其中X和Y是對應於div位置的變量。

因此，第四列和第一行中的div將具有這兩個類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> 

我要選擇每格是連續第1行之後有很多的div，我不想要一個緩慢的過程。除了必須選擇每個現有的div，然後通過並解析大於1的數值的類屬性之外，是否有更直接更有效的方法？

請注意，因爲divs .nextAll()的隨機絕對定位，這將是非常方便不會工作。

更新：請參閱我目前有最佳答案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>