javascript - 使用 jQuery 对 div 进行排序

Question

我正在尝试使用 jQuery sort div，它确实可以排序，但似乎排序不正确。

这是在应用 sort 之后

这里是 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>

和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，它包含所有需要有序的 div。

Here it's

抱歉，没有响应

Answer 1

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

The localeCompare() method returns a number indicating whether a reference string comes before or after or is the same as the given string in sort order.

代码:

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

演示:http://jsfiddle.net/bk66on10/

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