使用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列表

回答

相关问题