CODEWITHSUNDEEP
jquerylistunordered
Silverburch
Silverburch

Reputation: 477

Split jQuery list into two alphabetically ordered parts by class

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);
}

Upvotes: 2

Views: 47

Answers (2)

CertainPerformance
CertainPerformance

Reputation: 370759

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>

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337560

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>

Upvotes: 1

Related Questions