Marcio Mazzucato Marcio Mazzucato -4 years ago 72
jQuery Question

Sort HTML list with HTML content using JQuery

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?

Answer Source

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,

  1. Wrapped those number with span tags like <span class="num">39</span>
  2. 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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download