文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在Javascript中对特定的DOM节点进行排序？

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

Stack Overflow用户

提问于 2020-07-10 10:05:31

回答 1查看 38关注 0票数 1

我有一个如下所示的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]);
}

javascript

sorting

dom

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-07-10 10:35:55

因为您有一个非常严格的结构，所以可以提出一个选择器，它将选择最后一个.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>

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62826297

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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