javascript - 如何在 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]);
}

标签： javascriptsortingdom

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>