使用 jQuery 对 div 进行排序

I'm trying to sort divs using jQuery, it does sort, but does not seems sorting properly.

这是申请后的样子sort

here is HTML片段。

<div class="container column">
    <div class="row">
        <section class="col-md-10 col-md-offset-3">
            <section class="col-md-2 col-md-offset-1"><a href="./stafferLink/index.php" >Staffer Link</a></section>
            <section class="col-md-2 col-md-offset-1"><a href="./stafferLink/view.php">View Data</a></section>
        </section>
    </div>
</div>

and jQuery

var $divs = $(".container.column");

$(document).ready(function () {
    var alphabeticallyOrderedDivs = $divs.sort(function (a, b) {
        return $(a).find("a:first").text() > $(b).find("a:first").text();
    });
    $("#container").html(alphabeticallyOrderedDivs);
});

PS: #container是最外面的div包含所有divs这需要井然有序。

这是 http://jsfiddle.net/gumfobs9/

抱歉，没有responsive

这是一个大小写问题尝试对元素广告进行排序，忽略大小写并使用localCompare功能。

localeCompare() 方法返回一个数字，指示是否 参考字符串位于给定之前或之后或与给定相同 按排序顺序的字符串。

Code:

var alphabeticallyOrderedDivs = $divs.sort(function (a, b) {
    return $(a).find("a:first").text().toLowerCase().localeCompare($(b).find("a:first").text().toLowerCase());           
});

Demo: http://jsfiddle.net/bk66on10/ http://jsfiddle.net/bk66on10/

Ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare