使用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建议,我用波纹管后的代码,它工作正常我。
答
尝试下面的代码,
$(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));
}
编辑:更新你的标记一点的更好的代码,
- 包裹的数量与
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);
}
+0
你的代码很好,可以工作!但对于我的情况,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);
}
尝试实施这一方案这里概述:http://*.com/questions/304396/what-is-the-easiest-way-to-order-a-ul-ol-在jquery – Blender 2012-04-23 21:27:28
和一个更多http://*.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