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

JAVASCRIPT / 글쓴이

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

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

정렬을 위해 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을 잡더라도 여전히 중단되지 않는지 확인합니다