我有点力不从心,我希望这是可能的。

我希望能够调用一个函数,该函数将按字母顺序对列表中的所有项进行排序。

我一直在寻找通过jQuery UI排序,但这似乎不是它。任何想法吗?


当前回答

如果你正在使用jQuery,你可以这样做:

$(function() { var $list = $("#list"); $list.children().detach().sort(function(a, b) { return $(a).text().localeCompare($(b).text()); }).appendTo($list); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <ul id="list"> <li>delta</li> <li>cat</li> <li>alpha</li> <li>cat</li> <li>beta</li> <li>gamma</li> <li>gamma</li> <li>alpha</li> <li>cat</li> <li>delta</li> <li>bat</li> <li>cat</li> </ul>

注意,从compare函数返回1和-1(或0和1)是绝对错误的。

其他回答

@SolutionYogi的答案很有魅力,但似乎使用$。这两种方法都不如直接添加列表来得直接和有效:

var mylist = $('#list');
var listitems = mylist.children('li').get();

listitems.sort(function(a, b) {
   return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());
})

mylist.empty().append(listitems);

小提琴

为了使这个工作在包括Chrome在内的所有浏览器中工作,你需要使sort()的回调函数返回-1、0或1。

参见http://inderpreetsingh.com/2010/12/01/chromes-javascript-sort-array-function-is-different-yet-proper/

function sortUL(selector) {
    $(selector).children("li").sort(function(a, b) {
        var upA = $(a).text().toUpperCase();
        var upB = $(b).text().toUpperCase();
        return (upA < upB) ? -1 : (upA > upB) ? 1 : 0;
    }).appendTo(selector);
}
sortUL("ul.mylist");

将列表放入一个数组中,使用JavaScript的.sort(),它默认是按字母顺序排列的,然后将数组转换回列表。

http://www.w3schools.com/jsref/jsref_sort.asp

HTML

<ul id="list">
    <li>alpha</li>
    <li>gamma</li>
    <li>beta</li>
</ul>

JavaScript

function sort(ul) {
    var ul = document.getElementById(ul)
    var liArr = ul.children
    var arr = new Array()
    for (var i = 0; i < liArr.length; i++) {
        arr.push(liArr[i].textContent)
    }
    arr.sort()
    arr.forEach(function(content, index) {
        liArr[index].textContent = content
    })
}

sort("list")

j挑战者演示https://j挑战者le.net970061nw/

在这里,我们将ul中li元素的所有值推入特定的id(我们作为函数参数提供)到数组arr中,并使用sort()方法对其排序,该方法默认按字母顺序排序。数组arr排序后,我们使用forEach()方法循环该数组,并将所有li元素的文本内容替换为排序内容

$(".list li").sort(asc_sort).appendTo('.list');
//$("#debug").text("Output:");
// accending sort
function asc_sort(a, b){
    return ($(b).text()) < ($(a).text()) ? 1 : -1;    
}

// decending sort
function dec_sort(a, b){
    return ($(b).text()) > ($(a).text()) ? 1 : -1;    
}

现场演示:http://jsbin.com/eculis/876/edit