Create Javascript To Sort List alphabetycally-CodePudding

Hello I would like to sort automatically in li.

I explain with an exemple.

Here, an exemple of code :

<ul >

    <li  id="xxxxxx">
        <a  href="ccccc" data-depth="1">
            Luffy
        </a>
    </li>

    <li  id="xxxxxx">
        <a  href="ccccc" data-depth="1">
            987
        </a>
    </li>   
    
    <li  id="xxxxxx">
        <a  href="ccccc" data-depth="1">
            564
        </a>
    </li>   
    
    <li  id="xxxxxx">
        <a  href="ccccc" data-depth="1">
            Sabo
        </a>
    </li>
    
    <li  id="xxxxxx">
        <a  href="ccccc" data-depth="1">
            Smoker
        </a>
    </li>

    <li  id="xxxxxx">
        <a  href="ccccc" data-depth="1">
            Zorro
        </a>
    </li>

</ul>

The result is

    Luffy
    987
    564
    Sabo
    Smoker
    Zorro

Now, I would like help for making a script in JS to sort and create the first letter automatically and alphabetically.

I would like to have this result :

    0-9
    
    564
    987

    L
    
    Luffy

    S
    
    Sabo
    Smoker

    Z
    
    Zorro

Thanks

I try some stuff but noting work

CodePudding user response：

// 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 >

    <li  id="xxxxxx">
        <a  href="ccccc" data-depth="1">
            Luffy
        </a>
    </li>

    <li  id="xxxxxx">
        <a  href="ccccc" data-depth="1">
            987
        </a>
    </li>   
    
    <li  id="xxxxxx">
        <a  href="ccccc" data-depth="1">
            564
        </a>
    </li>   
    
    <li  id="xxxxxx">
        <a  href="ccccc" data-depth="1">
            Sabo
        </a>
    </li>
    
    <li  id="xxxxxx">
        <a  href="ccccc" data-depth="1">
            Smoker
        </a>
    </li>

    <li  id="xxxxxx">
        <a  href="ccccc" data-depth="1">
            Zorro
        </a>
    </li>

</ul>