Как отсортировать определенные узлы DOM в Javascript?

Question

У меня есть код html, как показано ниже, в котором я хочу, чтобы элементы sort html присутствовали после последнего тега h2.

<div class="organization-results">
   <h2 class="organization-subtitle">B</h2>
   <div class="organization-code">
      <h3 class="organization-title">Xyz Abc</h3>
   </div>
   <div class="organization-code">
      <h3 class="organization-title">Abc Xyz</h3>
   </div>
   
   <h2 class="organization-subtitle">A</h2>
   <div class="organization-code">
      <h3 class="organization-title">Xyz Abc</h3>
   </div>
   <div class="organization-code">
      <h3 class="organization-title">Abc Xyz</h3>
   </div>
   <!-- Sort contents after last organization subtitle START -->
   <h2 class="organization-subtitle">C</h2>
   <div class="organization-code">
      <h3 class="organization-title">Pqr Abc</h3>
   </div>
   <div class="organization-code">
      <h3 class="organization-title">Xyz Abc</h3>
   </div>
   <div class="organization-code">
      <h3 class="organization-title">Abc Xyz</h3>
   </div>
   <div class="organization-code">
      <h3 class="organization-title">Tuv Vbu</h3>
   </div>
    <!-- Sort contents after last organization subtitle END -->
</div>

Это то, чего я хочу достичь:

<div class="organization-results">
   <h2 class="organization-subtitle">B</h2>
   <div class="organization-code">
      <h3 class="organization-title">Xyz Abc</h3>
   </div>
   <div class="organization-code">
      <h3 class="organization-title">Abc Xyz</h3>
   </div>
   
   <h2 class="organization-subtitle">A</h2>
   <div class="organization-code">
      <h3 class="organization-title">Xyz Abc</h3>
   </div>
   <div class="organization-code">
      <h3 class="organization-title">Abc Xyz</h3>
   </div>
   <!-- Sort contents after last organization subtitle START -->
   <h2 class="organization-subtitle">C</h2>
   <div class="organization-code">
      <h3 class="organization-title">Abc Xyz</h3>      
   </div>
   <div class="organization-code">
      <h3 class="organization-title">Pqr Abc</h3>      
   </div>
   <div class="organization-code">
      <h3 class="organization-title">Tuv Vbu</h3>
   </div>
   <div class="organization-code">
    <h3 class="organization-title">Xyz Abc</h3>
   </div>
    <!-- Sort contents after last organization subtitle END -->
</div>

Это то, что я пробовал, но думаю, что нужно сделать больше.

var list = document.getElementsByClassName('.organization-results .organization-subtitle:last-child .organization-title');

var items = list.childNodes;
var itemsArr = [];
for (var i in items) {
    if (items[i].nodeType == 1) { // get rid of the whitespace text nodes
        itemsArr.push(items[i]);
    }
}

itemsArr.sort(function(a, b) {
  return a.innerHTML == b.innerHTML
          ? 0
          : (a.innerHTML > b.innerHTML ? 1 : -1);
});

for (i = 0; i < itemsArr.length; ++i) {
  list.appendChild(itemsArr[i]);
}

Answer 1

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

.organization-subtitle:last-of-type ~ .organization-code

Оттуда это простой вопрос извлечение этих элементов в DocumentFragment и повторное добавление их отсортированных после этого элемента .organization-subtitle:last-of-type.

const container = document.querySelector( '.organization-results' );
const limit_selector = ".organization-subtitle:last-of-type"
const items = [ ...container.querySelectorAll( limit_selector + " ~ .organization-code") ]
  .sort( (a, b) =>
    a.textContent.localeCompare( b.textContent )
  );
const frag = document.createDocumentFragment();
frag.append( ...items );

container.querySelector( limit_selector ).after( frag );

<div class="organization-results">
   <h2 class="organization-subtitle">B</h2>
   <div class="organization-code">
      <h3 class="organization-title">Xyz Abc</h3>
   </div>
   <div class="organization-code">
      <h3 class="organization-title">Abc Xyz</h3>
   </div>
   
   <h2 class="organization-subtitle">A</h2>
   <div class="organization-code">
      <h3 class="organization-title">Xyz Abc</h3>
   </div>
   <div class="organization-code">
      <h3 class="organization-title">Abc Xyz</h3>
   </div>
   <!-- Sort contents after last organization subtitle START -->
   <h2 class="organization-subtitle">C</h2>
   <div class="organization-code">
      <h3 class="organization-title">Pqr Abc</h3>
   </div>
   <div class="organization-code">
      <h3 class="organization-title">Xyz Abc</h3>
   </div>
   <div class="organization-code">
      <h3 class="organization-title">Abc Xyz</h3>
   </div>
   <div class="organization-code">
      <h3 class="organization-title">Tuv Vbu</h3>
   </div>
    <!-- Sort contents after last organization subtitle END -->
</div>