3 回答

TA貢獻(xiàn)1802條經(jīng)驗 獲得超6個贊
我將使用普通的ES6 JS提供另一個DOM版本,該版本根據(jù)HTMLTexts的textContent對HTMLElements進(jìn)行排序。這是一個輔助函數(shù),我部分是從對另一個問題的回答中得出的。
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>

TA貢獻(xiàn)1845條經(jīng)驗 獲得超8個贊
這是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>

TA貢獻(xiàn)1853條經(jīng)驗 獲得超9個贊
以下代碼段可能會對您有所幫助,您應(yīng)該使用它.innerHTML來設(shè)置新內(nèi)容:
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>
添加回答
舉報