Выберите визуально первый элемент при переупорядочении с помощью flex

Question

Допустим, у меня есть список с 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>

Answer 1

Вот способ дать вам порядок ваших элементов, затем вы можете использовать фильтры в своем списке, чтобы исключить невидимые элементы или все, что вам нравится.

jQuery Кстати, есть некоторые полезные функции для таких приложений , будет немного чище с этим.

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>

Answer 2

Я думаю, что это должно сработать.

• Рассчитать с js, что является <li> с минимальным значением заказа.
• Добавлен класс с именем .first-element к этому элементу.

let list = document
      .getElementById("list")
      .querySelectorAll('li');
const orders = [];

list.forEach((item, index) => {
      orders.push(item.style.order);
});

let minVal = Math.min(...orders);

list.forEach((item, index) => {
    if (minVal == item.style.order 
        && item.style.order !== "" ) {
         item.classList.add("first-element");
        }
});

.first-element {
  background-color: pink;
}

<ul id="list" 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>