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

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

나는 여기서 조금 내 전문을 벗어나서 이것이 실제로 가능하기를 바란다.

목록에 있는 모든 항목을 알파벳 순으로 정렬하는 함수를 호출할 수 있으면 좋겠습니다.

정렬을 위해 jQuery UI를 찾아봤는데 그게 아닌 것 같아요.무슨 생각 있어?

다음과 같은 경우:

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

이 작업을 수행하는 데 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");

라이브 데모 →

$(".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)을 반환하는 것은 완전히 잘못된 것입니다.

@솔루션Yogi의 답변은 매력적으로 작용하지만, $.를 사용하는 것이 목록 항목을 직접 추가하는 것보다 덜 간단하고 효율적인 것으로 보인다.

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

2. 를 사용합니다.children('li')('ul li') 때문에 중요합니다.

3. 기능 (a,b)=>외관만 좋아졌다(IE는 지원되지 않는다)

4. innerText$(a).text()

5. localeCompare동일한 요소의 경우 속도 향상(실제 사용에서 제외)

6. 를 사용합니다.appendTo(this)두개 이상의 .

제가 직접 해보려고 했는데 어떤 답변도 만족스럽지 않았습니다. 왜냐하면, 2차 시간이고, 수백 개의 항목을 나열해야 하기 때문입니다.

저는 jquery를 확장하게 되었고, 제 솔루션은 jquery를 사용하지만 javascript를 스트레이트 하도록 쉽게 수정할 수 있었습니다.

각 항목에 두 번만 액세스하고 선형 정렬을 한 번 수행하면 대규모 데이터셋에서 훨씬 더 빠를 수 있습니다. 하지만 이 작업은 다음과 같습니다.

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를 사용합니다..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/

여기에서는, 모든 가치를 나타냅니다.li내부 요소ul구체적으로id(이것을 함수 인수로 제공) 어레이에 대해arr기본 알파벳 순으로 정렬된 sort() 메서드를 사용하여 정렬합니다.배열 후arr정렬되어 있습니다.ForEach() 메서드를 사용하여 이 배열을 루프하고 모든 텍스트 콘텐츠를 바꿉니다.li내용이 정렬된 요소

언급URL : https://stackoverflow.com/questions/1134976/how-may-i-sort-a-list-alphabetically-using-jquery