Поднять
с определенным классом выше других

Question

Как поднять в html структуре на первую позицию li с классом current-lang при загрузке страницы при помощи чистого javascript?

<ul class="language-selected">
  <li class="lang-item lang-item-10 lang-item-en lang-item-first">
    <a lang="en-GB" hreflang="en-GB" href="#"></a>
  </li>
  <li class="lang-item lang-item-2 lang-item-uk">
    <a lang="uk" hreflang="uk" href="#"></a>
  </li>
  <li class="lang-item lang-item-5 lang-item-ru current-lang">
    <a lang="ru-RU" hreflang="ru-RU" href="#"></a>
  </li>
</ul>

Answer 1

У меня получилось так:

.current-lang {
    position: absolute;
    top: 0;
}

<ul class="language-selected">
  <li class="lang-item lang-item-10 lang-item-en lang-item-first">
    <a lang="en-GB" hreflang="en-GB" href="#">1</a>
  </li>
  <li class="lang-item lang-item-2 lang-item-uk">
    <a lang="uk" hreflang="uk" href="#">2</a>
  </li>
  <li class="lang-item lang-item-5 lang-item-ru current-lang">
    <a lang="ru-RU" hreflang="ru-RU" href="#">3</a>
  </li>
</ul>

Answer 2

Добавил кнопку для демонстрации работы.

let ul = document.querySelector('ul.language-selected');
let liCurrent = ul.querySelector('li.current-lang');
//ul.prepend(liCurrent);

document.getElementById('makeCurrentFirst').addEventListener('click', () => ul.prepend(liCurrent));

<ul class="language-selected">
  <li class="lang-item lang-item-10 lang-item-en lang-item-first">
    <a lang="en-GB" hreflang="en-GB" href="#">en-GB</a>
  </li>
  <li class="lang-item lang-item-2 lang-item-uk">
    <a lang="uk" hreflang="uk" href="#">uk</a>
  </li>
  <li class="lang-item lang-item-5 lang-item-ru current-lang">
    <a lang="ru-RU" hreflang="ru-RU" href="#">ru-RU</a>
  </li>
</ul>

<button id="makeCurrentFirst">
  Make it first!
</button>

Answer 3

const currentLang = document.querySelector(".current-lang");
const langsList = currentLang.parentElement;

// Удаляем елемент из DOM
currentLang.remove();
// Вставляем его перед первым в списке
langsList.insertBefore(currentLang, langsList.firstChild);

/* ТОЛЬКО ДЛЯ ДЕМОНСТРАЦИИ */
.current-lang {
  font-weight: bold;
}

.lang-item a:after {
  content: attr(hreflang);
}

<ul class="language-selected">
  <li class="lang-item lang-item-10 lang-item-en lang-item-first">
    <a lang="en-GB" hreflang="en-GB" href="#"></a>
  </li>
  <li class="lang-item lang-item-2 lang-item-uk">
    <a lang="uk" hreflang="uk" href="#"></a>
  </li>
  <li class="lang-item lang-item-5 lang-item-ru current-lang">
    <a lang="ru-RU" hreflang="ru-RU" href="#"></a>
  </li>
</ul>

Answer 4

Так же можно перенести в начало списка с помощью flexbox order.

.language-selected {
  display: flex;
  flex-direction: column;
}

.language-selected .current-lang {
  order: -1;
}


/* ДЛЯ ДЕМОНСТРАЦИИ */

.current-lang {
  font-weight: bold;
}

.lang-item a:after {
  content: attr(hreflang);
}

<ul class="language-selected">
  <li class="lang-item lang-item-10 lang-item-en lang-item-first">
    <a lang="en-GB" hreflang="en-GB" href="#"></a>
  </li>
  <li class="lang-item lang-item-2 lang-item-uk">
    <a lang="uk" hreflang="uk" href="#"></a>
  </li>
  <li class="lang-item lang-item-5 lang-item-ru current-lang">
    <a lang="ru-RU" hreflang="ru-RU" href="#"></a>
  </li>
</ul>

БЛОГ НА HUSL

Поднять
с определенным классом выше других

Ответы (4 шт):

БЛОГ НА HUSL

Поднять с определенным классом выше других

Ответы (4 шт):

Поднять
с определенным классом выше других