使用JQuery对包含HTML内容的HTML列表进行排序
是否可以将下面的列表从较小的数字排序到较大的数字,并保留每个li的内容使用JQuery对包含HTML内容的HTML列表进行排序,jquery,Jquery,是否可以将下面的列表从较小的数字排序到较大的数字,并保留每个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" nam
<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>
-
39
-
34
-
38
-
35
-
33
我需要它像贝娄自动排序,因为列表将动态创建
<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>
-
33
-
34
-
35
-
38
-
39
谢谢你的帮助
编辑:
function numOrdDesc(a, b) {
var aTxt = parseInt($(a).find('.num').text(), 10);
var bTxt = parseInt($(b).find('.num').text(), 10);
return (bTxt - aTxt);
}
通过@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
标签(如39
function numOrdDesc(a, b) {
var aTxt = parseInt($(a).find('.num').text(), 10);
var bTxt = parseInt($(b).find('.num').text(), 10);
return (bTxt - aTxt);
}
试试下面的代码
$(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
标签(如39
function numOrdDesc(a, b) {
var aTxt = parseInt($(a).find('.num').text(), 10);
var bTxt = parseInt($(b).find('.num').text(), 10);
return (bTxt - aTxt);
}
您的函数应该是这样的
function numOrdDesc(a, b) {
var aTxt = parseInt($(a)[0].innerText, 10);
var bTxt = parseInt($(b)[0].innerText, 10);
return (bTxt - aTxt);
}
您的函数应该是这样的
function numOrdDesc(a, b) {
var aTxt = parseInt($(a)[0].innerText, 10);
var bTxt = parseInt($(b)[0].innerText, 10);
return (bTxt - aTxt);
}
尝试实施这里概述的解决方案:还有一个@Blender,你的建议对我很有用!使用这个问题中的代码,我得到了所需要的!谢谢大家!@维加,谢谢你的帮助!使用您的代码和我在上次编辑中输入的答案,我得到了我所需要的!尝试实现这里概述的解决方案:还有一个@Blender,你的建议对我很有用!使用这个问题中的代码,我得到了所需要的!谢谢大家!@维加,谢谢你的帮助!使用您的代码和我在上次编辑中输入的答案,我得到了我所需要的!你的代码很好用!但就我的情况而言,关于搅拌器间隙效果更好的建议更简单。非常感谢!你的代码很好用!但就我的情况而言,关于搅拌器间隙效果更好的建议更简单。非常感谢!