Split jQuery list into two alphabetically ordered parts by class

Question

I'd like list elements with class 'active' to be ordered alphabetically at the top of a list, with the remainder of the list underneath ordered separately. In other words,

<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>

results in..

bb
rr
yy
hh
ii
kk
mm
zz

I think I've got the right approach but I can't seem to get this to work. Something to do with the append I think. Can anyone help me get over the last hurdle? 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);
}

Have you tried this ? https://stackoverflow.com/a/1134983/2943218 — Carsten Løvbo Andersen, Jun 11 '19 at 11:20
Yes I have - but was still having problems extracting just part of the list and putting it back in the place I want — Silverburch, Jun 11 '19 at 11:22

CertainPerformance · Answer 1 · 2019-06-11T11:26:06.347

Detach the lis, not their inner <span>s - then, in the .sort function, access the span text, and then use prependTo to insert at the top.

It looks like you want to sort both the .actives and the non-.actives, so put that logic into your compare function too, by subtracting calls of 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>

Thanks @CertainPerformance, yes, this works too although Rory's solution was the first to fully work. — Silverburch, Jun 11 '19 at 11:30

score 1 · Accepted Answer · answered Jun 11 '19 at 11:23

To achieve this you can amend your sort() logic to first compare the classes on the elements, and then if they match compare them by text. Try this:

$('#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>

Glad to help. Note that the `sort()` logic can be made less verbose, but it gets harder to understand, so I left it clear to read — Rory McCrossan, Jun 11 '19 at 11:30

Split jQuery list into two alphabetically ordered parts by class

2 Answers2