Разделить список jQuery на две части в алфавитном порядке по классам

Я хотел бы, чтобы элементы списка с классом «активный» были упорядочены в алфавитном порядке в верхней части списка, а остальная часть списка внизу упорядочена отдельно. Другими словами,

<li><label><span>zz</span></label></li>
<li class='active'><label><span>rr</span></label></li>
<li class='active'><label><span>bb</span></label></li>
<li><label><span>hh</span></label></li>
<li><label><span>ii</span></label></li>
<li class='active'><label><span>yy</span></label></li>
<li><label><span>kk</span></label></li>
<li><label><span>mm</span></label></li>

приводит к..

bb
rr
yy
hh
ii
kk
mm
zz

Я думаю, что у меня есть правильный подход, но я не могу заставить его работать. Что-то с добавлением, я думаю. Может ли кто-нибудь помочь мне преодолеть последнее препятствие? https://jsfiddle.net/Lcz47b9y/

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id = "rootUl">
    <li><label><span>zz</span></label></li>
    <li class='active'><label><span>rr</span></label></li>
    <li class='active'><label><span>bb</span></label></li>
    <li><label><span>hh</span></label></li>
    <li><label><span>ii</span></label></li>
    <li class='active'><label><span>yy</span></label></li>
    <li><label><span>kk</span></label></li>
    <li><label><span>mm</span></label></li>
</ul>

var myli = $('#rootUl li.active label').children('span').detach().sort(sortByText);

$('#rootUl').append($(myli))

function sortByText(a, b) {
    var first = $.trim($(a).text());
    var second = $.trim($(b).text());
    return first.localeCompare(second);
}

Вы пробовали это? stackoverflow.com/a/1134983/2943218

— 11.06.2019 13:20

Да, у меня есть, но у меня все еще были проблемы с извлечением только части списка и возвращением ее в то место, которое я хочу

— 11.06.2019 13:22

jquery list unordered

11.06.2019 13:15

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Отсоедините li, а не их внутренние <span>, затем в функции .sort получите доступ к тексту диапазона, а затем используйте prependTo для вставки вверху.

Похоже, вы хотите отсортировать обе по .actives и не .actives, поэтому поместите эту логику и в свою функцию сравнения, вычтя вызовы hasClass:

const getSpanText = elm => $(elm).find('span').text();

$('#rootUl li')
  .detach()
  .sort(sortByText)
  .prependTo('#rootUl');

function sortByText(a, b) {
  return $(b).hasClass('active') - $(a).hasClass('active')
    || getSpanText(a).localeCompare(getSpanText(b));
}

.active {
  background-color: yellow;
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id = "rootUl">
  <li><label><span>zz</span></label></li>
  <li class='active'><label><span>rr</span></label></li>
  <li class='active'><label><span>bb</span></label></li>
  <li><label><span>hh</span></label></li>
  <li><label><span>ii</span></label></li>
  <li class='active'><label><span>yy</span></label></li>
  <li><label><span>kk</span></label></li>
  <li><label><span>mm</span></label></li>
</ul>

Обратите внимание, что элементы, отличные от .active, также необходимо отсортировать.

— 11.06.2019 13:25

Спасибо @CertainPerformance, да, это тоже работает, хотя решение Рори было первым, которое полностью заработало.

— 11.06.2019 13:30

11.06.2019 13:22

Ответ принят как подходящий

Для этого вы можете изменить свою логику sort(), чтобы сначала сравнить классы элементов, а затем, если они совпадают, сравнить их по тексту. Попробуй это:

$('#rootUl li').sort(function(a, b) {
  var $a = $(a), $b = $(b);
  if ($a.hasClass('active') && !$b.hasClass('active')) {
    return -1;
  } else if (!$a.hasClass('active') && $b.hasClass('active')) {
    return 1;
  }
  
  return $a.text().toUpperCase().localeCompare($b.text().toUpperCase());
}).appendTo('#rootUl');

.active { color: #C00; }

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id = "rootUl">
  <li><label><span>zz</span></label></li>
  <li class='active'><label><span>rr</span></label></li>
  <li class='active'><label><span>bb</span></label></li>
  <li><label><span>hh</span></label></li>
  <li><label><span>ii</span></label></li>
  <li class='active'><label><span>yy</span></label></li>
  <li><label><span>kk</span></label></li>
  <li><label><span>mm</span></label></li>
</ul>

Ах, теперь я вижу, где я ошибался. Отличное решение.

— 11.06.2019 13:29

Рад помочь. Обратите внимание, что логику sort() можно сделать менее подробной, но ее становится труднее понять, поэтому я оставил ее понятной для чтения.

— 11.06.2019 13:30

11.06.2019 13:23