[JQUERY] 어떻게 jQuery를 사용하여 알파벳 순으로 목록을 정렬 할 수 있습니다?

어떻게 jQuery를 사용하여 알파벳 순으로 목록을 정렬 할 수 있습니다?

해결법

1. ---

   1.이 작업을 수행하기 위해 jQuery를 필요가 없습니다 ...

   이 작업을 수행하기 위해 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");
   

   라이브 데모 →

2. ---

   2.이 같은:

   이 같은:

   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

3. ---

   3.

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

4. ---

   4.크롬을 포함한 모든 브라우저와이 작품의 작업을 당신은 종류의 () 반환 -1,0 또는 1의 콜백 기능을해야합니다.

   크롬을 포함한 모든 브라우저와이 작품의 작업을 당신은 종류의 () 반환 -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");
   

5. ---

   5.당신이 jQuery를 사용하는 경우이 작업을 수행 할 수 있습니다 :

   당신이 jQuery를 사용하는 경우이 작업을 수행 할 수 있습니다 :

   () {(기능 $ var에 $ 목록 = $ ( "# 목록"); $ list.children (). 분리 (). 정렬 방법 (함수 (a, b) { 반환 $ (a)는 .text () localeCompare ($ (b)는 .text ()).; }) appendTo ($ 목록).; }); <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">

   • 델타
   • 고양이
   • 알파
   • 고양이
   • 베타
   • 감마
   • 감마
   • 알파
   • 고양이
   • 델타
   • 박쥐
   • 고양이

     비교 기능에서 1을 반환과 1 (0 및 1하여) 절대적으로 잘못되어 있습니다.

   • ---

     6.SolutionYogi의 대답은 마법처럼 작동하지만 $를 사용하여 직접 추가하는 많은 ListItems보다 간단하고 효율적 .each 것으로 보인다 @ :

     SolutionYogi의 대답은 마법처럼 작동하지만 $를 사용하여 직접 추가하는 많은 ListItems보다 간단하고 효율적 .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);
     

     깡깡이

   • ---

     7.지트 앤드 라 차우의 답변에 따라 개선

     지트 앤드 라 차우의 답변에 따라 개선

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

     왜 내가 그것을 개선 고려 :

   • ---

     8.나는이 나 자신을 찾고 있었다, 나는 단지 내가 생각하기 때문에 제공하는 답변의 만족 않네, 그들은 차 시간이고, 나는 긴 항목의 목록 수백에서이 작업을 수행해야합니다.

     나는이 나 자신을 찾고 있었다, 나는 단지 내가 생각하기 때문에 제공하는 답변의 만족 않네, 그들은 차 시간이고, 나는 긴 항목의 목록 수백에서이 작업을 수행해야합니다.

     내가 jQuery를 확장 결국, 내 솔루션 jQuery를 사용하지만, 쉽게 바로 자바 스크립트를 사용하도록 수정 될 수 있습니다.

     나는 자유롭게 내가 잘못 될 수 고백하지만 난 단지, 훨씬 빨리 대규모 데이터 세트에로, 내 생각, 작업을 두 번 각 항목을 액세스하고이해야하므로, 하나 개의 linearithmic 정렬을 수행있다 :

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

   • ---

     9.다음 목록에 배열 다시 변환, 사용, 배열 순으로 디폴트로 자바 스크립트 .sort을 (), 목록을 넣습니다.

     다음 목록에 배열 다시 변환, 사용, 배열 순으로 디폴트로 자바 스크립트 .sort을 (), 목록을 넣습니다.

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

   • ---

     10.HTML

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

     JS 휘티 d 혀라도 h っ tps : // js 휘티 d 차다. 군요 t / 97 오 61 응 w /

     여기에서는 어레이 도착 특정 ID가 UL 내부 리 모든 요소 값 (우리는 함수의 인수로서 제공되는) 푸시하고 정렬는 정렬 () 기본적으로 분류 알파벳 인 방법을 사용. 어레이 도착) 우리를 foreach는 (사용이 배열되어 루프 정렬 방법 및 정렬 막 콘텐츠 모든 리튬 원소의 텍스트 콘텐츠를 교체 한 후

   from https://stackoverflow.com/questions/1134976/how-may-i-sort-a-list-alphabetically-using-jquery by cc-by-sa and MIT license