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进行排序。这是我从an answer to another question部分派生的辅助函数。

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].innerHTML);
        }

        listWithAllaOrdnr.sort() // [A, B, C, E]

        for (var i = 0; i < antal; i++) {
          document.getElementsByClassName("ordernummer")[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>

Answer 4

以下代码段可能会对您有所帮助，您应该使用.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>

Answer 5

这可能对您有帮助

document.querySelector('button').onclick = function(){
  let container   = document.querySelector('div.container');
  let paragraphs  = container.querySelectorAll('p.ordernummer');
  
  let dataContainer = [];

  paragraphs.forEach(function(p){
    dataContainer.push(p.innerText);
  }); 

  let sorted = dataContainer.sort(function(next, current){
    if (current.toLowerCase() > next.toLowerCase()) return -1;
    if (current.toLowerCase() < next.toLowerCase()) return 1;
    return 0;
  });

  paragraphs.forEach(function(p, i){
    p.innerText = sorted[i];
  });
};

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div class="container">
		<p class="ordernummer"> B </p>
		<p class="ordernummer"> A </p>
		<p class="ordernummer"> E </p>
		<p class="ordernummer"> C </p>
		<p class="ordernummer"> D </p>
	</div>
	<button>Sort em</button>
  </body>
</html>

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

5 个答案: