Изменение позиции элемента li с данным классом внутри ul?

Question

У меня есть ul с несколькими элементами li, у одного из них всегда будет класс "active".Как сделать так, чтобы элемент li.active всегда отображался в верхней части списка?

Я не могу контролировать вывод html, который создает этот список, поэтому мне придется сделать это с помощью css (предпочтительно) илиJavaScript / JQuery.Я думаю, что нет способа сделать это с помощью css, но было бы здорово иметь какое-то свойство позиции в списке.

Большое спасибо!

Answer 1

Если мы предположим, что высота элементов списка будет постоянной (и это довольно большое предположение):

ul {
  position: relative;
  padding-top: 2em;
}

li {
  height: 2em;
}

li.active {
  position: absolute;
  top: 0;
  left: 0;
}

Answer 2

Если (и я думаю, что вы это сделаете) вам нужно манипулировать фактическим порядком элемента списка, как вы уже догадались, только CSS не сможет его сократить. Вы пометили этот пост с помощью 'jquery', так что я думаю, вы знаете о селекторах этой библиотеки и так далее. Конечно, вам просто нужно (а) выбрать элемент li с классом "active", а затем (б) вставить указанный элемент в верхней части неупорядоченного списка? Это прекрасно выполнимо в jQuery. Вот (ОЧЕНЬ) простой способ сделать это:

    $('ul').prepend($('.active'));

Все, что это делает, это захватывает первый элемент на странице с классом 'active' и добавляет его к первому неупорядоченному списку. Возможно, это слишком упрощенно для ваших нужд, но, надеюсь, это поможет вам найти более надежное решение.