如何对 Javascript 中的特定 DOM 节点进行排序？

Question

我有一个 html 代码，如下所示，我想在最后一个 h2 标记之后对 html 元素进行排序。

<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

由于你有一个非常严格的结构，你可以想出一个选择器，它将 select 最后一个.organization-subtitle之后的所有.organization-code元素：

.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>