Пересортировать элементы по тегу

Question

Помогите, пожалуйста, как пересортировать элементы внутри блока по тегу. У меня есть вот такой код

<div class="box-content">
    <button class="tab tab-100000 active-tab" type="button">Цена</button>
    <section class="content tab-100000 show-tab js-default-hide"></section>
    <button class="tab tab-10" type="button">Производитель</button>
    <section class="content tab-10 js-default-hide"></section>
    <button class="tab tab-11" type="button">Тип</button>
    <section class="content tab-11 js-default-hide"></section>
    <button class="tab tab-16" type="button">Страна</button>
    <section class="content tab-16 js-default-hide"></section>
    <button class="tab tab-23" type="button">Полярность</button>
    <section class="content tab-23 js-default-hide"></section>
    <button class="tab tab-24" type="button">Ёмкость</button>
    <section class="content tab-24 js-default-hide"></section>
    <button class="tab tab-25" type="button">Бренд</button>
    <section class="content tab-25 js-default-hide"></section>
</div>

Необходимо получить такой результат

<div class="box-content">
    <button class="tab tab-100000 active-tab" type="button">Цена</button>
    <button class="tab tab-10" type="button">Производитель</button>
    <button class="tab tab-11" type="button">Тип</button>
    <button class="tab tab-16" type="button">Страна</button>
    <button class="tab tab-23" type="button">Полярность</button>
    <button class="tab tab-24" type="button">Ёмкость</button>
    <button class="tab tab-25" type="button">Бренд</button>
    <section class="content tab-100000 show-tab js-default-hide"></section>
    <section class="content tab-10 js-default-hide"></section>
    <section class="content tab-11 js-default-hide"></section>
    <section class="content tab-16 js-default-hide"></section>
    <section class="content tab-23 js-default-hide"></section>
    <section class="content tab-24 js-default-hide"></section>
    <section class="content tab-25 js-default-hide"></section>
</div>

Уже третий день убиваю в интернете, но всё что находил было или про массивы, или пересортировать по классу/атрибуту. У меня тут цикл фильтра выводит только так, с этим ничего не поделать, а чтобы сделать нормальные вкладки, необходимо чтобы button`ы были рядом все.

Пробовал получить элементы и вывести, но что-то не могу догнать, как удалить старые и вывести эти, если тут конечно элементы, потому что не до конца понимаю что возвращают функции.

var f_bnt = document.getElementsByClassName('tab');
var f_sec = document.getElementsByTagName('section');

Answer 1

(Справки):

let elements = document.querySelectorAll(".box-content > *");
// Список из всех элементов непосредственно внутри box-content

let sorted = [...elements].sort( (a,b) => a.tagName < b.tagName ? -1 : 1 );
// [...список] — добавляет все элементы списка в настоящий массив,
// у которого есть метод sort()

// Отсортирован массив элементов. На странице это пока никак не отображается.

let box = document.querySelector(".box-content");

sorted.forEach( elem => box.appendChild(elem) );
// Элемент не может находиться в двух местах одновременно.
// когда .appendChild() добавляет элемент в конец box,
// он удаляетя из своего предыдущего места.

// * Google. → Стрелочные функции, Spread operator

//-- Нечего было делать:
let tabs = document.querySelectorAll(".tab");
for( let i = 0; i < tabs.length; i++ ) {
  tabs[i].addEventListener("click", function() {
    let box = this.closest(".box-content");
    
    let contents = box.querySelectorAll(".content");
    let tabs = box.querySelectorAll(".tab");
    
    let index = [].indexOf.call(tabs, this); // Номер текущей кнопки среди остальных.
    
    box.querySelectorAll(".active").forEach(el => el.classList.remove("active"));
    
    this.classList.add("active");
    contents[index].classList.add("active");
  });
}
// Код будет вдвое короче, если предполагать, что такой box-content только один

.content {
  display: none;
}

.content.active {
  display: block;
  padding: 10px;
  margin: 10px;
  border: 1px solid orange;
}

.tab.active {
  color: red;
}

<div class="box-content">
  <button class="tab active">Цена</button>
  <section class="content active">1</section>
  <button class="tab">Производитель</button>
  <section class="content">2</section>
  <button class="tab">Тип</button>
  <section class="content">3</section>
  <button class="tab">Страна</button>
  <section class="content">4</section>
  <button class="tab">Полярность</button>
  <section class="content">5</section>
  <button class="tab">Ёмкость</button>
  <section class="content">6</section>
  <button class="tab">Бренд</button>
  <section class="content">7</section>
</div>

не до конца понимаю что возвращают функции.

root.getElementsByClassName("строка-название-класса");
root.getElementsByTagName("строка-название-тега");

Оба возвращают «Живой» нумерованный список элементов (не массив). Список будет постоянно обновляться по мере изменений в HTML.

А root.querySelectorAll("css-селектор") - один раз выдает список, который больше не будет меняться.

БЛОГ НА HUSL

Пересортировать элементы по тегу

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