JQuery Select 某一行之后的所有div（div是随机排列的，绝对定位）

Question

我有一个绝对大小相等的网格，随机排列 divs，目前他们有 classes 使用结构 columnX 和 rowY。其中X和Y是div位置对应的变量。

所以第四列和第一行的div将有这两个classes column4和row1作为class的属性值.作为解决方案的一部分，我可以更改有关 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>

我想 select 第 1 行之后的每个 div。有很多 div，我不想要一个缓慢的过程。除了必须 select 每个现有的 div 然后通过并剖析大于 1 的数值的 class 属性之外，是否有更直接和有效的方法？

请注意，由于 divs .nextAll() 的随机绝对定位，这本来非常方便，但无法正常工作。

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

Answer 1

如果您使用一元编码数字设置行和列数据属性（例如 3 是 111，7 是 1111111），您可以 select 属性大于那些的元素，方法是使用 "starts with" ^= 运算符.

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

JQuery Select 某一行之后的所有div（div是随机排列的，绝对定位）

JQuery Select all divs after a certain row (divs are in random order, positioned absolute)

javascript

css

jquery

jquery-selectors