Question

以下是我的HTML代码：

<ul class="ul_s_results">
            <li class="li_results">
                <table>
                    <tr>
                        <td><a class="li_name">John</a></td>
                        <td><a class="li_roll">4</a></td>
                    </tr>
                </table>
            </li>
            <li class="li_results">
                <table>
                    <tr>
                        <td><a class="li_name">Jack</a></td>
                        <td><a class="li_roll">1</a></td>
                    </tr>
                </table>
            </li>
            <li class="li_results">
                <table>
                    <tr>
                        <td><a class="li_name">Abe</a></td>
                        <td><a class="li_roll">3</a></td>
                    </tr>
                </table>
            </li>
            <li class="li_results">
                <table>
                    <tr>
                        <td><a class="li_name">Racheal</a></td>
                        <td><a class="li_roll">2</a></td>
                    </tr>
                </table>
            </li>
        </ul>
        <button>sort</button>

我想根据表格中的class="li_roll"对列表进行排序。如果HTML不包含<table>

，我能够完美地对列表进行排序

编辑：仅当我删除<table>代码和name时才有效。

<li class="li_results">
    <a class="li_roll">4</a>
</li>

当li_roll和li_name在桌子内时，有人知道如何排序列表吗？

新JS代码：

    $(function () {
    var liContents = [];
    $('ul li .li_roll').each (function () {
        liContents.push(parseInt($(this).text(), 10));
        alert($(this).text());
    });

    liContents.sort(numOrdDesc);

    $('ul li').each (function () {
        $(this).text(liContents.pop());
    });
});

function numOrdDesc(a, b){ return (b-a); }

js代码的结果（它删除所有名称）

1

2

3

4

Answer 1

这是基于.li_roll

的文本值的html的工作排序

$("button").click(function(){
   var lis = $(".li_results");

    lis = lis.sort(function(a,b){
       var num1 = parseInt($(a).find(".li_roll").text(), 10),
           num2 = parseInt($(b).find(".li_roll").text(), 10);
        console.log(num1, num2);
        if (num1 > num2) return 1;
        if (num1 < num2) return -1;
        return 0;
    });

    $(".ul_s_results").html(lis);
});

工作小提琴： http://jsfiddle.net/f85Ym/

jquery在ul里面排序li

1 个答案: