如何找到元素的列位置？或者如何按列位置查找元素？

Question

在网页中，我有一个列表（ul）元素（li）。 由于CSS列，元素分布在几列中。

我想知道：

1. 在哪个列中是给定元素？
2. 给定元素是其列中的第一个元素还是最后一个元素？
3. 给定列中的第一个元素或最后一个元素是什么？

我该怎么做？例如，在JavaScript中。也许在CSS选择器中？

谢谢。

Answer 1

你想做什么没有CSS机制。可能的是检查每个元素的位置，并根据它进行一些计算和推断。这是一些伪代码：

1. 获取所有li元素的列表。
2. 检索其边界值（getBoundingClientRect）
3. 同一列中的元素应具有相同的“左”坐标。因此，按“左”坐标对组进行排序，以创建每列的组。
4. 现在，您可以轻松找到每个列组的第一个和最后一个元素。
5. 要查看元素n在其列中是第一个还是最后一个，请检查其“顶部”坐标是否是其所在列中所有元素的最小值（或最大值）。

你说这太重了，但让我们仔细看看。以下是查找每列中元素数量的代码。这使用了Underscore，但一般来说很容易写：

var lis = document.querySelectorAll('ul li');
var rects = _.map(lis, function(li) { return li.getBoundingClientRect(); });
var columns = _.groupby(rects, 'left');
var column_counts = _.map(columns, function(c) { return c.length; });