您好，我想在 li 中自動排序。
我舉例說明。
在這里，一個代碼示例：
<ul class="uuuu">
<li class="aaaaaa" id="xxxxxx">
<a class="bbbbbb" href="ccccc" data-depth="1">
Luffy
</a>
</li>
<li class="aaaaaa" id="xxxxxx">
<a class="bbbbbb" href="ccccc" data-depth="1">
987
</a>
</li>
<li class="aaaaaa" id="xxxxxx">
<a class="bbbbbb" href="ccccc" data-depth="1">
564
</a>
</li>
<li class="aaaaaa" id="xxxxxx">
<a class="bbbbbb" href="ccccc" data-depth="1">
Sabo
</a>
</li>
<li class="aaaaaa" id="xxxxxx">
<a class="bbbbbb" href="ccccc" data-depth="1">
Smoker
</a>
</li>
<li class="aaaaaa" id="xxxxxx">
<a class="bbbbbb" href="ccccc" data-depth="1">
Zorro
</a>
</li>
</ul>
結果是
Luffy
987
564
Sabo
Smoker
Zorro
現在，我需要幫助在 JS 中創建一個腳本來自動和按字母順序排序和創建第一個字母。
我想要這個結果：
0-9
564
987
L
Luffy
S
Sabo
Smoker
Z
Zorro
謝謝
我嘗試了一些東西，但注意到作業
uj5u.com熱心網友回復：
// Get the <li> nodes:
let nodes = Array.from(document.querySelectorAll('ul.uuuu li'))
// Sort them alphabetically:
nodes.sort(function(a, b){
let word1 = a.querySelector('a').innerText.trim()
let word2 = b.querySelector('a').innerText.trim()
if ( word1 < word2 ) {
return -1
}
if ( word2 < word1 ) {
return 1;
}
return 0;
})
var lastLetter = ''
document.querySelector('ul.uuuu').innerHTML = ''
// Insert them back into the DOM:
nodes.forEach(function(node){
let thisLetter = node.querySelector('a').innerText.trim().substr(0, 1)
// Decide whether to add a section header:
if (
thisLetter != lastLetter
) {
if ( ! ( thisLetter.match(/[0-9]/) && lastLetter.match(/[0-9]/) ) ) {
let newElmt = document.createElement('span')
newElmt.innerText = ( thisLetter.match(/[0-9]/) ? '0-9' : thisLetter )
document.querySelector('ul.uuuu').appendChild(newElmt)
}
}
lastLetter = thisLetter // Remember which section we are up to
// Insert this node:
document.querySelector('ul.uuuu').appendChild(node)
})<ul class="uuuu">
<li class="aaaaaa" id="xxxxxx">
<a class="bbbbbb" href="ccccc" data-depth="1">
Luffy
</a>
</li>
<li class="aaaaaa" id="xxxxxx">
<a class="bbbbbb" href="ccccc" data-depth="1">
987
</a>
</li>
<li class="aaaaaa" id="xxxxxx">
<a class="bbbbbb" href="ccccc" data-depth="1">
564
</a>
</li>
<li class="aaaaaa" id="xxxxxx">
<a class="bbbbbb" href="ccccc" data-depth="1">
Sabo
</a>
</li>
<li class="aaaaaa" id="xxxxxx">
<a class="bbbbbb" href="ccccc" data-depth="1">
Smoker
</a>
</li>
<li class="aaaaaa" id="xxxxxx">
<a class="bbbbbb" href="ccccc" data-depth="1">
Zorro
</a>
</li>
</ul>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/525389.html