jQuery를 사용하여 알파벳순으로 목록을 정렬하려면 어떻게해야합니까?

나는 여기 내 깊이에서 조금 벗어 났고 이것이 실제로 가능하기를 바라고 있습니다.

목록의 모든 항목을 알파벳순으로 정렬하는 함수를 호출하고 싶습니다.

정렬을 위해 jQuery UI를 살펴 보았지만 그렇지 않습니다. 이견있는 사람?

이를 위해 jQuery가 필요 하지 않습니다 ...

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];
}

사용하기 쉬운...

sortUnorderedList("ID_OF_LIST");

라이브 데모 →

이 같은:

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

이 페이지에서 : http://www.onemoretake.com/2009/02/25/sorting-elements-with-jquery/

위의 코드는 정렬되지 않은 목록을 ID 'myUL'로 정렬합니다.

또는 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;    
}

라이브 데모 : http://jsbin.com/eculis/876/edit

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

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>

비교 함수에서 1과 -1 (또는 0과 1)을 반환하는 것은 절대적으로 잘못 입니다.

@SolutionYogi의 대답은 매력처럼 작동하지만 $ .each를 사용하는 것이 직접 목록 항목을 추가하는 것보다 덜 간단하고 효율적입니다.

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

깡깡이

Jeetendra Chauhan 의 답변을 바탕으로 한 개선

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

왜 내가 그것을 개선이라고 생각합니까?

1. each둘 이상의 ul에서 실행을 지원하는 데 사용

2. 직계 자손 만 처리하고 후손은 처리하지 않기 때문에 children('li')대신 사용 하는 ('ul li')것이 중요합니다.

3. 화살표 기능을 사용하면 (a,b)=>더 좋아 보입니다 (IE는 지원되지 않음)

4. 속도 향상 innerText대신 바닐라 사용$(a).text()

5. 바닐라를 사용 localeCompare하면 동일한 요소의 경우 속도가 향상됩니다 (실제 사용에서는 드)니다)

6. appendTo(this)다른 선택기를 사용 하는 대신 선택기를 사용하면 선택기가 둘 이상의 ul을 잡더라도 여전히 중단되지 않는지 확인합니다

나는 이것을 직접하고 싶었고, 나는 그것이 이차 시간이기 때문에 단순히 제공된 대답에 만족하지 못했습니다. 수백 개의 항목 목록 에서이 작업을 수행해야합니다.

나는 jquery를 확장하고 솔루션 은 jquery를 사용하지만 간단한 자바 스크립트를 사용하도록 쉽게 수정할 수 있습니다.

나는 각 항목에 두 번만 액세스하고 하나의 선형 정렬 정렬을 수행하므로 큰 실수로 인해 더 빠르게 작동해야한다고 생각하지만 실수로 고백 할 수 있다고 생각합니다.

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

목록을 배열에 넣고 JavaScript 's ( .sort()기본적으로 알파벳순)를 사용한 다음 배열을 다시 목록으로 변환하십시오.

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

HTML

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

자바 스크립트

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

JSFiddle 데모 https://jsfiddle.net/97oo61nw/

여기서는 기본적으로 알파벳순으로 정렬 된 sort () 메서드를 사용하여 배열 하고 정렬하기 위해 특정 (함수 인수로 제공 한) li요소 내부 의 모든 요소 값을 푸시합니다 . 배열 이 정렬 된 후 forEach () 메소드를 사용 하여이 배열을 반복 하고 모든 요소 의 텍스트 내용을 정렬 된 내용으로 바꿉니다.ulidarrarrli