从类中获取信息并将其转换为数组

Question

我当前正在构建一个排序系统，我想对这四个元素进行排序，这四个元素都具有相同的类。

      function sortByOrdnr() {

        var allaOrdnr = document.getElementsByClassName("ordernummer");

        var antal = allaOrdnr.length;

        var listWithAllaOrdnr = [];

        for (var i = 0; i < antal; i++) {

          listWithAllaOrdnr.push(allaOrdnr[i]);

        }

        listWithAllaOrdnr.sort() // [A, B, C, E]

        console.log(listWithAllaOrdnr);

        for (var i = 0; i < antal; i++) {

          document.getElementsByClassName("ordernummer")[i] = listWithAllaOrdnr[i];

        }

      }

<button onclick="sortByOrdnr()"> Button </button>

    <p class="ordernummer"> A </p>

    <p class="ordernummer"> E </p>

    <p class="ordernummer"> B </p>

    <p class="ordernummer"> C </p>

最后，我希望类更改位置，以便在单击按钮时对四个元素进行排序，如下所示：

<p class="ordernummer"> A </p>

<p class="ordernummer"> B </p>

<p class="ordernummer"> C </p>

<p class="ordernummer"> E </p>

我感谢所有的帮助。提前致谢。

Answer 1

我将使用普通的ES6 JS提供另一个DOM版本，该版本根据HTMLTexts的textContent对HTMLElements进行排序。这是一个辅助函数，我部分是从对另一个问题的回答中得出的。HTMLCollection.prototype.sort = function() {&nbsp; [...this]&nbsp; &nbsp; .sort( (a, b) => a.textContent.localeCompare(b.textContent) )&nbsp; &nbsp; .forEach( (val) => val.parentNode.appendChild(val) );}包括此之后，您可以直接在NodeList上使用.sort（）。演示：function sortByOrdnr() {&nbsp; var allaOrdnr = document.getElementsByClassName("ordernummer");&nbsp; allaOrdnr.sort();}HTMLCollection.prototype.sort = function() {&nbsp; [...this]&nbsp; &nbsp; .sort( (a, b) => a.textContent.localeCompare(b.textContent) )&nbsp; &nbsp; .forEach( (val) => val.parentNode.appendChild(val) );}<button onclick="sortByOrdnr()"> Button </button><p class="ordernummer"> A </p><p class="ordernummer"> E </p><p class="ordernummer"> B </p><p class="ordernummer"> C </p>

Answer 2

这是DOM版本function sortByOrdnr() {&nbsp; const oDiv = document.getElementById("container");&nbsp; const ps = oDiv.querySelectorAll("p");&nbsp; let vals = [];&nbsp; ps.forEach(p => vals.push(p.textContent));&nbsp; let sortArr = vals.slice(0);&nbsp; sortArr.sort().forEach(val => {&nbsp; &nbsp; oDiv.appendChild(ps[vals.indexOf(val)])&nbsp; })}<button onclick="sortByOrdnr()"> Button </button><div id="container">&nbsp; <p class="ordernummer"> A </p>&nbsp; <p class="ordernummer"> E </p>&nbsp; <p class="ordernummer"> B </p>&nbsp; <p class="ordernummer"> C </p></div>

Answer 3

以下代码段可能会对您有所帮助，您应该使用它.innerHTML来设置新内容：&nbsp; &nbsp; function sortByOrdnr() {&nbsp; &nbsp; &nbsp; &nbsp; var allaOrdnr = document.getElementsByClassName("ordernummer");&nbsp; &nbsp; &nbsp; &nbsp; var antal = allaOrdnr.length;&nbsp; &nbsp; &nbsp; &nbsp; var listWithAllaOrdnr = [];&nbsp; &nbsp; &nbsp; &nbsp; for (var i = 0; i < antal; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; listWithAllaOrdnr.push(allaOrdnr[i].innerText);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; listWithAllaOrdnr.sort() // [A, B, C, E]&nbsp; &nbsp; &nbsp; &nbsp; for (var i = 0; i < antal; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; allaOrdnr[i].innerHTML = listWithAllaOrdnr[i];&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }<button onclick="sortByOrdnr()"> Button </button>&nbsp; &nbsp; <p class="ordernummer"> A </p>&nbsp; &nbsp; <p class="ordernummer"> E </p>&nbsp; &nbsp; <p class="ordernummer"> B </p>&nbsp; &nbsp; <p class="ordernummer"> C </p>