본문 바로가기
jQuery

숫자 정렬 토글로 만들기

by hjcode 2019. 12. 19.
<button id="btn">sort!</button>

<ul id="list">
  <li>6</li>
  <li>7</li>
  <li>3</li>
  <li>1</li>
  <li>12</li>
</ul>

 

var array = [];
var switching = true;

$('#list li').each(function(idx, val) {
  array.push(val.innerText);
})


function toggleSort() {

  switching = !switching;

  var code = '',
    list = $('#list');

  list.empty();

  if (switching) {
    array.sort(function(a, b) {
      return b - a; // reverse
    })
    console.log(array)

    for (var i = 0; i < array.length; i++) {
      code += '<li>' + array[i] + '</li>';
    }
    list.append(code)

  } else {
    array.sort(function(a, b) {
      return a - b; // sort
    })

    for (var i = 0; i < array.length; i++) {
      code += '<li>' + array[i] + '</li>';
    }

    list.append(code)
  }



}

$('#btn').on('click', toggleSort)

 

더 간결하게 짤 수 있을거 같은데.. 일단 이렇게..

 

jsfiddle로 보기

https://jsfiddle.net/hyuckjin/zfny5qtu/

'jQuery' 카테고리의 다른 글

DocumentFragment  (0) 2019.12.20
jQuery로 간단한 todo 만들기  (0) 2019.11.14
날씨 위젯  (0) 2019.10.11
계산기 만들기  (0) 2019.10.02
TweenMax 텍스트 애니메이션  (0) 2019.10.02