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: stackoverflow.com/questions/304396/… — Blender
– Blender, Commented Apr 23, 2012 at 21:27
@Blender, Your suggestion works to me! Using the code in this question i got what was needing! Thank you! — Marcio Mazzucato
– Marcio Mazzucato, Commented Apr 23, 2012 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
– Marcio Mazzucato, Commented May 14, 2012 at 22:53

Selvakumar Arumugam · Accepted Answer · 2012-04-23 21:42:09Z

4

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

answered Apr 23, 2012 at 21:42

Selvakumar Arumugam

79.9k15 gold badges123 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Marcio Mazzucato Over a year ago

Your code is nice and works! But for my case the suggestion that Blender gaves works better, it is more simple. Many thanks!

kamran shah · Accepted Answer · 2017-06-13 16:24:41Z

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, 2017 at 16:24

kamran shah

1

Collectives™ on Stack Overflow

Sort HTML list with HTML content using JQuery

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related