2

是否可以将下面的列表从较小的数字排序到较大的数字，保持每个 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>

谢谢你的帮助！

编辑：

通过评论中的@Blender 建议，我在下面的帖子中使用了代码，它对我来说很好用。

在 jQuery 中订购 <UL>/<OL> 的最简单方法是什么？

4

2 回答 2

4

试试下面的代码，

$(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));
}

演示

编辑：稍微更新了您的标记以获得更好的代码，

  1. span用标签包裹这些数字<span class="num">39</span>
  2. 更新了排序功能如下，

代码：

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

演示

于 2012-04-23T21:42:09.183 回答
0

你的功能应该是这样的。

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

演示

于 2017-06-13T16:24:41.853 回答