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，我不想要一个缓慢的过程。是否有更简单有效的方法，除了必须选择每个现有的div然后通过并解析大于1的数值的类属性？

请注意，因为div .nextAll()的随机绝对定位本来很方便。

已更新：请查看我目前拥有的最佳答案here。我相信有更有效的方法可以做到这一点。

Answer 1

如果使用一元编码数字设置行和列数据属性（例如3是111,7是1111111），则可以使用＆＃34;以＆＃34;开头选择属性大于那些的元素。 ^=运营商。

＆＃13;

＆＃13;

// 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);

＆＃13;

#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; }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;