Как добавить разделитель между пунктами после сортировки?

Есть список задач. У каждой из них в вёрстке есть атрибут data-is_done со значением 1 или 0, где 1 — это выполненное, а 0 — еще нет. Выполненные задачи после пузырька сползают вниз, там все хорошо.

<div class="task_wrapper" data-is_done="0"></div>
<div class="task_wrapper" data-is_done="0"></div>
<div class="task_wrapper" data-is_done="1"></div>
<div class="task_wrapper" data-is_done="1"></div>

Как мне во время сортировки между пунктами со значением 0 и 1 создать разделитель?

Например, пусть будет прагматичный <hr>:

<div class="task_wrapper" data-is_done="0"></div>
<div class="task_wrapper" data-is_done="0"></div>
<hr>
<div class="task_wrapper" data-is_done="1"></div>
<div class="task_wrapper" data-is_done="1"></div>

Вот код пузырька:

function sortTasks() {
  let wrap = document.querySelector('.adding_data_window');
  for (let i = 0; i < wrap.children.length; i++) {
    for (let j = i; j < wrap.children.length; j++) {
      if (+wrap.children[i].getAttribute('data-is_done') > +wrap.children[j].getAttribute('data-is_done')) {
        replacedNode = wrap.replaceChild(wrap.children[j], wrap.children[i]);
        insertAfter(replacedNode, wrap.children[i]);
      }
    }
  }

  function insertAfter(element, refElement) {
    return refElement.parentNode.insertBefore(element, refElement.nextSibling);
  }
}

// * выполнить эту функцию
// sortTasks();

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

Автор решения: Алексей Шиманский

Самый простой вариант: сделать отдельную функцию, которая после сортировки спокойно пройдётся циклом и поставит разделить перед первым по счёту элементом с единичкой (например с помощью метода insertBefore).

А вписывать ещё доп. функциональность в сортировку - неправильно.


А вообще тут и сама сортировка неправильна. В смысле - надо собрать данные массив, отсортировать и на основе массива что-то отрисовать или перерисовать. А так получается это не сортировка, а несколько операций в одном

→ Ссылка