按行和列对元素进行排序

Question

我有数字4，列数。

此外，我有一个包含X个元素的无序列表

<ul>
  <li>element 1</li>
  <li>element 1</li>
  <li>element 1</li>
  <li>element 1</li>
  <li>element 1</li>
  <li>element 1</li>
  <li>element 1</li>
  etc.
</ul>

我想要以下输出：

<ul>
  <li data-row="1" data-column="1">element 1</li>
  <li data-row="1" data-column="2">element 1</li>
  <li data-row="1" data-column="3">element 1</li>
  <li data-row="1" data-column="4">element 1</li>
  <li data-row="2" data-column="1">element 1</li>
  <li data-row="2" data-column="2">element 1</li>
  <li data-row="2" data-column="3">element 1</li>
  etc.
</ul>

我该如何巧妙地做到这一点？

Answer 1

分部和模数：

lis = yourULElement.getElementsByTagName('li') // the <li> elements
limit = 4 // your number

for (var i = 0; i < lis.length; i ++) {
    lis[i].setAttribute('data-row', Math.floor(i / limit) + 1)
    lis[i].setAttribute('data-column', i % limit + 1)
}

<强> Here's a JSFiddle

说明：

      | i / 4,            |
Index | Math.floor(i / 4) | i % 4
------+-------------------+-------
0     | 0, 0              | 0
1     | 0.25, 0           | 1
2     | 0.5, 0            | 2
3     | 0.75, 0           | 3
4     | 1, 1              | 0
5     | 1.25, 1           | 1
6     | 1.5, 1            | 2
7     | 1.75, 1           | 3