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

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() {

  [...this]

    .sort( (a, b) => a.textContent.localeCompare(b.textContent) )

    .forEach( (val) => val.parentNode.appendChild(val) );

}

包括此之后，您可以直接在NodeList上使用.sort（）。

演示：

function sortByOrdnr() {

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

  allaOrdnr.sort();

}

HTMLCollection.prototype.sort = function() {

  [...this]

    .sort( (a, b) => a.textContent.localeCompare(b.textContent) )

    .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() {

  const oDiv = document.getElementById("container");

  const ps = oDiv.querySelectorAll("p");

  let vals = [];

  ps.forEach(p => vals.push(p.textContent));

  let sortArr = vals.slice(0);

  sortArr.sort().forEach(val => {

    oDiv.appendChild(ps[vals.indexOf(val)])

  })

}

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

<div id="container">

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

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

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

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

</div>

Answer 3

以下代码段可能会对您有所帮助，您应该使用它.innerHTML来设置新内容：

    function sortByOrdnr() {

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

        var antal = allaOrdnr.length;

        var listWithAllaOrdnr = [];

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

          listWithAllaOrdnr.push(allaOrdnr[i].innerText);

        }

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

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

          allaOrdnr[i].innerHTML = 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>