是否可以将下面的列表从较小的数字到较大的数字排序,保留每个 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的建议,我使用了下面帖子中的代码,它对我来说效果很好。
在 jQuery 中订购 /
最简单的方法是什么?
尝试下面的代码,
$(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:更新了你的标记以获得更好的代码,
- 将这些数字包裹起来
span
标签如<span class="num">39</span>
- 更新了排序器功能如下,
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
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)