Как добавить разделитель между пунктами после сортировки?
Есть список задач. У каждой из них в вёрстке есть атрибут 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).
А вписывать ещё доп. функциональность в сортировку - неправильно.
А вообще тут и сама сортировка неправильна. В смысле - надо собрать данные массив, отсортировать и на основе массива что-то отрисовать или перерисовать. А так получается это не сортировка, а несколько операций в одном