Jquery sorting li inside ul

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/