Sort list item in custom order in Javascript

Question

I have a list like this

   <ul id="list">
        <li data-ind="1">L</li>
        <li data-ind="2">M</li>
        <li data-ind="3">S</li>
        <li data-ind="4">XL</li>
        <li data-ind="5">XS</li>
    </ul>

I want to sort them like this : XS, S, M, L, XL how can I do this by injecting javascript/jQuery

Answer 1

You can use sort on the li elements and append them again in that order to the ul element.

The sorted position is dependent on the last letter (in reverse alphabetical order) and the number of Xs (I added some double X items to demonstrate):

const seq = txt => "ML".indexOf(txt.slice(-1)) * txt.length;
$("#list").append($("#list li").get().sort((a, b) =>
    seq(a.textContent) - seq(b.textContent)
));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="list">
    <li id="1">L</li>
    <li id="2">M</li>
    <li id="3">S</li>
    <li id="4">XL</li>
    <li id="5">XS</li>
    <li id="6">XXL</li>
    <li id="7">XXS</li>
</ul>