Как отсортировать дочерние элементы по атрибуту value

Question

Подскажите пожалуйста, как можно отсортировать дочерние элементы, входящие в ms-FocusZone в алфавитном порядке.

<div class="ms-FocusZone css-83" data-focuszone-id="FocusZone228">
    <div class="ComposedCheckbox" data-automationtype="ComposedCheckbox" data-is-checked="false"
      data-checked-value="Communications">
    </div>
    <div class="ComposedCheckbox" data-automationtype="ComposedCheckbox" data-is-checked="false"
      data-checked-value="Incentives">
    </div>
    <div class="ComposedCheckbox" data-automationtype="ComposedCheckbox" data-is-checked="false"
      data-checked-value="Evaluation">
    </div>
    <div class="ComposedCheckbox" data-automationtype="ComposedCheckbox" data-is-checked="false"
      data-checked-value="Data">
      <div class="ms-TooltipHost root-113">
      </div>
    </div>
    <div class="ComposedCheckbox" data-automationtype="ComposedCheckbox" data-is-checked="false"
      data-checked-value="Roles">
    </div>
  </div>

В дальнейшем их придется перерендерить на странице. Спасибо!

Answer 1

Алгоритм предельно прост:

Запоминаем все дочерние элементы как массив
Удаляем из DOM-а
Сортируем по любому удобному признаку
Вставляем элементы из массива обратно

Сам код:

const parent = document.querySelector('.focus-zone');
const children = parent.querySelectorAll('.composed-checkbox');
const childrenArr = [...children];

childrenArr.forEach(child => child.remove());

childrenArr.sort((child1, child2) => {
  const value1 = child1.dataset.checkedValue.toLowerCase();
  const value2 = child2.dataset.checkedValue.toLowerCase();
  
  if (value1 > value2) return 1;
  if (value1 < value2) return -1;

  return 0;
});

childrenArr.forEach(child => parent.append(child));

<div class="focus-zone">
  <div class="composed-checkbox" data-checked-value="Communications">Communications</div>
  <div class="composed-checkbox" data-checked-value="Incentives">Incentives</div>
  <div class="composed-checkbox" data-checked-value="Evaluation">Evaluation</div>
  <div class="composed-checkbox" data-checked-value="Data">Data</div>
  <div class="composed-checkbox" data-checked-value="Roles">Roles</div>
</div>

БЛОГ НА HUSL

Как отсортировать дочерние элементы по атрибуту value

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