Làm cách nào để sắp xếp danh sách theo thứ tự abc bằng jQuery?

Tôi hơi sâu sắc ở đây và tôi hy vọng điều này thực sự có thể.

Tôi muốn có thể gọi một chức năng sắp xếp tất cả các mục trong danh sách của tôi theo thứ tự bảng chữ cái.

Tôi đã xem qua giao diện người dùng jQuery để sắp xếp nhưng dường như không phải vậy. Có suy nghĩ gì không?

Bạn không cần jQuery để làm điều này ...

function sortUnorderedList(ul, sortDescending) {
  if(typeof ul == "string")
    ul = document.getElementById(ul);

  // Idiot-proof, remove if you want
  if(!ul) {
    alert("The UL object is null!");
    return;
  }

  // Get the list items and setup an array for sorting
  var lis = ul.getElementsByTagName("LI");
  var vals = [];

  // Populate the array
  for(var i = 0, l = lis.length; i < l; i++)
    vals.push(lis[i].innerHTML);

  // Sort it
  vals.sort();

  // Sometimes you gotta DESC
  if(sortDescending)
    vals.reverse();

  // Change the list on the page
  for(var i = 0, l = lis.length; i < l; i++)
    lis[i].innerHTML = vals[i];
}

Dễ sử dụng ...

sortUnorderedList("ID_OF_LIST");

Demo trực tiếp →

Một cái gì đó như thế này:

var mylist = $('#myUL');
var listitems = mylist.children('li').get();
listitems.sort(function(a, b) {
   return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());
})
$.each(listitems, function(idx, itm) { mylist.append(itm); });

Từ trang này: http://www.onemoretake.com/2009/02/25/sorting-elements-with-jquery/

Mã ở trên sẽ sắp xếp danh sách không theo thứ tự của bạn với id 'myUL'.

HOẶC bạn có thể sử dụng một plugin như TinySort. https://github.com/Sjeiti/TinySort

$(".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;    
}

bản demo trực tiếp: http://jsbin.com/eculis/876/edit

Để làm cho công việc này hoạt động với tất cả các trình duyệt bao gồm Chrome, bạn cần làm cho hàm gọi lại của sort () trả về -1,0 hoặc 1.

xem http://inderpreetsingh.com/2010/12/01/chromes-javascript-sort-array-feft-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");

Nếu bạn đang sử dụng jQuery, bạn có thể làm điều này:

$(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>

Lưu ý rằng trả về 1 và -1 (hoặc 0 và 1) từ hàm so sánh là hoàn toàn sai .

Câu trả lời @ SolutionYogi hoạt động như một cơ duyên, nhưng có vẻ như việc sử dụng $ .each ít đơn giản và hiệu quả hơn so với các danh sách bổ sung trực tiếp:

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);

Vĩ cầm

cải thiện dựa trên câu trả lời của Jeetendra Chauhan

$('ul.menu').each(function(){
    $(this).children('li').sort((a,b)=>a.innerText.localeCompare(b.innerText)).appendTo(this);
});

tại sao tôi coi đó là một cải tiến:

1. sử dụng eachđể hỗ trợ chạy trên nhiều hơn một ul

2. sử dụng children('li')thay vì ('ul li')rất quan trọng vì chúng tôi chỉ muốn xử lý trẻ em trực tiếp chứ không phải con cháu

3. sử dụng chức năng mũi tên (a,b)=>trông có vẻ tốt hơn (IE không được hỗ trợ)

4. sử dụng vanilla innerTextthay vì $(a).text()cải thiện tốc độ

5. sử dụng vanilla localeComparecải thiện tốc độ trong trường hợp các yếu tố bằng nhau (hiếm khi sử dụng trong cuộc sống thực)

6. sử dụng appendTo(this)thay vì sử dụng bộ chọn khác sẽ đảm bảo rằng ngay cả khi bộ chọn bắt được nhiều hơn một ul vẫn không có gì bị hỏng

Tôi đang tìm cách tự làm điều này và tôi không hài lòng với bất kỳ câu trả lời nào được cung cấp đơn giản bởi vì, tôi tin rằng, chúng là thời gian bậc hai, và tôi cần phải làm điều này trong danh sách hàng trăm mục dài.

Tôi đã kết thúc việc mở rộng jquery và giải pháp của tôi sử dụng jquery, nhưng có thể dễ dàng được sửa đổi để sử dụng javascript thẳng.

Tôi chỉ truy cập mỗi mục hai lần và thực hiện một loại tuyến tính, do đó, tôi nghĩ rằng, việc này sẽ nhanh hơn rất nhiều trên các tập dữ liệu lớn, mặc dù tôi tự do thú nhận rằng tôi có thể bị nhầm lẫn ở đó:

sortList: function() {
   if (!this.is("ul") || !this.length)
      return
   else {
      var getData = function(ul) {
         var lis     = ul.find('li'),
             liData  = {
               liTexts : []
            }; 

         for(var i = 0; i<lis.length; i++){
             var key              = $(lis[i]).text().trim().toLowerCase().replace(/\s/g, ""),
             attrs                = lis[i].attributes;
             liData[key]          = {},
             liData[key]['attrs'] = {},
             liData[key]['html']  = $(lis[i]).html();

             liData.liTexts.push(key);

             for (var j = 0; j < attrs.length; j++) {
                liData[key]['attrs'][attrs[j].nodeName] = attrs[j].nodeValue;
             }
          }

          return liData;
       },

       processData = function (obj){
          var sortedTexts = obj.liTexts.sort(),
              htmlStr     = '';

          for(var i = 0; i < sortedTexts.length; i++){
             var attrsStr   = '',
                 attributes = obj[sortedTexts[i]].attrs;

             for(attr in attributes){
                var str = attr + "=\'" + attributes[attr] + "\' ";
                attrsStr += str;
             }

             htmlStr += "<li "+ attrsStr + ">" + obj[sortedTexts[i]].html+"</li>";
          }

          return htmlStr;

       };

       this.html(processData(getData(this)));
    }
}

Đặt danh sách trong một mảng, sử dụng JavaScript .sort(), theo mặc định là bảng chữ cái, sau đó chuyển đổi mảng trở lại danh sách.

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")

Bản trình diễn JSFiddle https://jsfiddle.net/97oo61nw/

Ở đây chúng ta sẽ đẩy tất cả các giá trị của licác phần tử bên trong ulvới cụ thể id(mà chúng ta đã cung cấp làm đối số hàm) sang mảng arrvà sắp xếp nó bằng phương thức sort () được sắp xếp theo thứ tự bảng chữ cái theo mặc định. Sau khi mảng arrđược sắp xếp, chúng tôi lặp lại mảng này bằng phương thức forEach () và chỉ thay thế nội dung văn bản của tất cả các lithành phần bằng nội dung được sắp xếp