JQueryを使用してHTMLコンテンツをHTMLコンテンツに並べ替える

Question

各liの内容を保持しながら、低い数字から大きな数字へのリストをソートすることは可能ですか？

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

リストが動的に作成されるため、自動的に以下のように注文する必要があります。

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

ありがとうございました！

EDIT：

はコメントで@Blender提案することで、私は怒鳴るポスト内のコードを使用し、それは私には正常に動作します。

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

Answer 1

コード以下しようとすると、

$(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

編集：は

1. がで、これらの番号を包まれ、より良いコードのために少しあなたのマークアップを更新しました<span class="num">39</span>
2. 以下のように更新しましたソーター機能のよう個のタグ、

コード：

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

DEMO

Answer 2

あなたの機能は次のようにする必要があります。

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

DEMO