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.
5 respuestas
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>
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>
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>
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>
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>
Preguntas relacionadas
Preguntas vinculadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.