Sort HTML list with HTML content using JQuery

Question

Is it possible to sort the list bellow from the lower number to the bigger number, keeping each li content?

<ul>
    <li>
        39
        <img class="botao-remover-tamanho" title="Remover cor" alt="" src="/admin/imagens/botao-excluir-cor.png">
        <input type="hidden" title="39" value="39" name="array_variacao[]">
    </li>
    <li>
        34
        <img class="botao-remover-tamanho" title="Remover cor" alt="" src="/admin/imagens/botao-excluir-cor.png">
        <input type="hidden" title="34" value="34" name="array_variacao[]">
    </li>
    <li>
        38
        <img class="botao-remover-tamanho" title="Remover cor" alt="" src="/admin/imagens/botao-excluir-cor.png">
        <input type="hidden" title="38" value="38" name="array_variacao[]">
    </li>
    <li>
        35
        <img class="botao-remover-tamanho" title="Remover cor" alt="" src="/admin/imagens/botao-excluir-cor.png">
        <input type="hidden" title="35" value="35" name="array_variacao[]">
    </li>
    <li>
        33
        <img class="botao-remover-tamanho" title="Remover cor" alt="" src="/admin/imagens/botao-excluir-cor.png">
        <input type="hidden" title="33" value="33" name="array_variacao[]">
    </li>
</ul>

I need it ordered like bellow automatically because the list will be created dynamically.

<ul>
    <li>
        33
        <img class="botao-remover-tamanho" title="Remover cor" alt="" src="/admin/imagens/botao-excluir-cor.png">
        <input type="hidden" title="33" value="33" name="array_variacao[]">
    </li>
    <li>
        34
        <img class="botao-remover-tamanho" title="Remover cor" alt="" src="/admin/imagens/botao-excluir-cor.png">
        <input type="hidden" title="34" value="34" name="array_variacao[]">
    </li>
    <li>
        35
        <img class="botao-remover-tamanho" title="Remover cor" alt="" src="/admin/imagens/botao-excluir-cor.png">
        <input type="hidden" title="35" value="35" name="array_variacao[]">
    </li>
    <li>
        38
        <img class="botao-remover-tamanho" title="Remover cor" alt="" src="/admin/imagens/botao-excluir-cor.png">
        <input type="hidden" title="38" value="38" name="array_variacao[]">
    </li>
    <li>
        39
        <img class="botao-remover-tamanho" title="Remover cor" alt="" src="/admin/imagens/botao-excluir-cor.png">
        <input type="hidden" title="39" value="39" name="array_variacao[]">
    </li>
</ul>

Thanks for any help!

EDIT:

By @Blender suggestion in the comments, i used the code in bellow post and it works fine to me.

What is the easiest way to order a <UL>/<OL> in jQuery?

Try implementing the solution outlined here: http://stackoverflow.com/questions/304396/what-is-the-easiest-way-to-order-a-ul-ol-in-jquery — Blender, Apr 23 '12 at 21:27
And One more http://stackoverflow.com/questions/10215341/order-sort-li-list-with-numeric-content-using-jquery/10215438#10215438 — Selvakumar Arumugam, Apr 23 '12 at 21:32
@Blender, Your suggestion works to me! Using the code in this question i got what was needing! Thank you! — Marcio Mazzucato, Apr 23 '12 at 21:59
@Vega, Thanks for your help! Using your code with and the answer i've putted in my last edit i got what i was needing! — Marcio Mazzucato, May 14 '12 at 22:53

score 4 · Accepted Answer · answered Apr 23 '12 at 21:42

Try below code,

$(function() {
    $('button').click(function() {
        var liContents = [];
        $('ul li').each(function() {
            liContents.push($(this).html());
        });
        liContents.sort(liSorter);
        $('ul li').each(function() {
            $(this).html(liContents.pop());
        });
    });
});

/*
  Below function is kind of a workaround for the listed HTMl
  you need to update it if you have proper HTML.
*/
function liSorter(a, b) {
    return (parseInt(b) - parseInt(a));
}

DEMO

Edit: Updated your markup a little for a better code,

Wrapped those number with span tags like <span class="num">39</span>
Updated sorter function as below,

Code:

function numOrdDesc(a, b) {
    var aTxt = parseInt($(a).find('.num').text(), 10);
    var bTxt = parseInt($(b).find('.num').text(), 10);
    return (bTxt - aTxt);
}

DEMO

Your code is nice and works! But for my case the suggestion that Blender gaves works better, it is more simple. Many thanks! — Marcio Mazzucato, Apr 23 '12 at 22:02

score 0 · Answer 2 · answered Jun 13 '17 at 16:24

0

Your function should be like this.

function numOrdDesc(a, b) {
    var aTxt = parseInt($(a)[0].innerText, 10);
    var bTxt = parseInt($(b)[0].innerText, 10);
    return (bTxt - aTxt);
}

DEMO

answered Jun 13 '17 at 16:24

kamran shah

1

Sort HTML list with HTML content using JQuery

2 Answers2

Linked