JavaScript Сортировка Списка

366

06 июня 2017, 01:45

Нужно отсортировать список, через js/jquery, с использованием 1 селектора ul.

Есть такой код, Задача состоит в том что, тэг 'ul' один, и нужно как-то отсортировать эти списки по значению внутри li, то есть нажал на кнопку от большого к меньшему - они поменялись местами, если нажал от меньшего к большому то поменялись местами обратно.

Есть ли подобное решение на js, либо какой материал почитать чтобы реализовать?

<div role="content" class="ui-content  my-listview clinics-listview">
    <ul id="list" data-role="" data-inset="true" class="clinics-list" >
        <li>2.5</li>
        <li>5.9</li>
        <li>1.5</li>
    </ul>
</div>

Answer 1

Получаете все li, сортируя с помощью .sort() вытягиваете их значения и вставляете отсортированый список в этот ul. Все.

$('#sort-asc').click(function() { 
  sort(true); 
}); 
$('#sort-desc').click(function() { 
  sort(false); 
}); 
 
function sort(isAscSorting) { 
  let selectList = $('#list li'); 
 
  selectList.sort(function(a, b) { 
    let aValue = +a.innerText; 
    let bValue = +b.innerText; 
 
    return isAscSorting ? 
      aValue > bValue : 
      aValue < bValue; 
  }); 
 
  $('#list').html(selectList); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="sort-asc">Asc</button> 
<button id="sort-desc">Desc</button> 
<ul id="list"> 
  <li>2.5</li> 
  <li>5.9</li> 
  <li>1.5</li> 
</ul>