时间戳

首页 > 解决方案 > 在通过 flex 重新排序时从视觉上选择第一个元素

javascript - 在通过 flex 重新排序时从视觉上选择第一个元素

问题描述

假设我有一个列表，其中display: flex内部元素用order: NNN;.

因此 DOM 中的第一个元素在视觉上可以是第 N 个。

是否可以使用 Javascript（或某种 CSS 选择器）选择视觉上首先出现的元素？

<ul style="display: flex; flex-direction: column;">
<li style="order: 2;">1</li>
<li style="order: 12;">2</li>
<li style="order: 0;">select me please</li>
<li>4</li>
</ul>

标签： javascriptcssflexbox

解决方案

这是一种为您提供元素顺序的方法，然后您可以使用列表中的过滤器来排除不可见元素或任何您喜欢的元素。

jQuery btw 对此类应用程序有一些有用的功能，这样会更干净一些。

var nList = document.querySelectorAll('li');
var aList = Array.from(nList);
aList.sort(function(a,b) {
    var sAOrder = a.style.order ? parseInt(a.style.order) : 0;
    var sBOrder = b.style.order ? parseInt(b.style.order) : 0;
    return sAOrder-sBOrder;
});
console.log(aList);
<ul style="display: flex; flex-direction: column;">
<li style="order: 2;">1</li>
<li style="order: 12;">2</li>
<li style="order: 0;">select me please</li>
<li>4</li>
</ul>

推荐阅读