Obtenga información de una clase y conviértala en una matriz

Question

Actualmente estoy construyendo un sistema de clasificación, y quiero ordenar estos cuatro elementos, que tienen la misma clase.

      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>

Al final, quiero que las clases cambien de posición, de modo que los cuatro elementos se ordenen al hacer clic en el botón, así:

<p class="ordernummer"> A </p>
<p class="ordernummer"> B </p>
<p class="ordernummer"> C </p>
<p class="ordernummer"> E </p>

Yo aprecio toda la ayuda. Gracias por adelantado.

javascript html

1

L Minor 10 may. 2019 a las 15:49

Answer 1

Proporcionaré otra versión DOM usando ES6 JS simple que clasifica los elementos HTMLE en su lugar en función de su contenido de texto. Esta es una función auxiliar que deriva en parte de una respuesta a otra pregunta.

HTMLCollection.prototype.sort = function() {
  [...this]
    .sort( (a, b) => a.textContent.localeCompare(b.textContent) )
    .forEach( (val) => val.parentNode.appendChild(val) );
}

Después de incluir esto, puede usar .sort () directamente en la NodeList.

Demostración:

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>

3

Daryll 10 may. 2019 a las 17:13

Answer 2

Aquí hay una versión 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>

1

mplungjan 10 may. 2019 a las 13:24

Answer 3

Aquí un fragmento que puede ayudarte, debes usar .innerHTML para configurar el nuevo contenido:

    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>

0

Radonirina Maminiaina 10 may. 2019 a las 13:00

Answer 4

Esto puede ayudarte

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>

0

harry 10 may. 2019 a las 13:34

Answer 5

Simplemente use .innerHTML para obtener el contenido interno. y ordenarlo y agregarlo a los elementos de la clase.

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>

0

Syed mohamed aladeen 10 may. 2019 a las 12:59

Obtenga información de una clase y conviértala en una matriz

5 respuestas

Preguntas relacionadas

Preguntas vinculadas

Nuevas preguntas

javascript