使用JQuery對HTML內容進行排序HTML列表

是否可以將列表中的數字從較低的數字排序到較大的數字，並保留每個li的內容？使用JQuery對HTML內容進行排序HTML列表

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

感謝您的幫助！

編輯：

通過在評論@Blender建議，我用波紋管後的代碼，它工作正常我。

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

來源

2012-04-23 Marcio Mazzucato

嘗試實施這一方案這裏概述：http://stackoverflow.com/questions/304396/what-is-the-easiest-way-to-order-a-ul-ol-在jquery – Blender 2012-04-23 21:27:28

和一個更多http://stackoverflow.com/questions/10215341/order-sort-li-list-with-numeric-content-using-jquery/10215438#10215438 – 2012-04-23 21:32:59

@Blender，你的建議對我有用！使用這個問題中的代碼，我得到了需要的東西！謝謝！ – 2012-04-23 21:59:40

嘗試下面的代碼，

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

編輯：更新你的標記一點的更好的代碼，

包裹的數量與span個標籤，如<span class="num">39</span>
如下更新分揀功能，

代碼：

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

DEMO

來源

2012-04-23 21:42:09

你的代碼很好，可以工作！但對於我的情況，Blender提供的建議效果更好，它更簡單。非常感謝！ – 2012-04-23 22:02:20

你的功能應該是這樣的。

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

DEMO

來源

2017-06-13 16:24:41

使用JQuery對HTML內容進行排序HTML列表

回答

相關問題