Sorting Based on Multiple CSS Classes, and Designing code with Jquery

Question

This question is primarily focused on how to manage code as you are developing, making it highly adaptable etc. Let me explain through this example, and it will make more sense. 'I will add bounty, if I need to'.

Our server is strapped for memory, and we are pushing a lot of sorting work onto the client side with Javascript/Jquery, to alleviate those issues. Here is the fiddle if you would like to follow along. https://jsfiddle.net/ydc6ywuz/23/

The problem comes with this code.

  var sortSubSite = $('.AccessSitesLinks.False');
  var subArr = sortSubSite.map(function(_, o){
        return {
          t: $(o).text(),
          h: $(o).attr('href'),
          c: $(o).attr('class')
        };
        }).get();
      sortSubSite.each(function(i, o) {
      var classList = $(o).attr('class').split(/\s+/);


        $('.ContainingBox.AccessSitesLinks.True.'+ classList[2]).append($(o));
        $(o).wrap("<div class='ContainingBox2'></div>");
        $(o).text(subArr[i].t);
        $(o).attr('href', subArr[i].h);
        $(o).attr('class', subArr[i].c + classList[2]);
      });

Each Home site will have the class AccessSitesLinks True [Num]. So all of its subsites would have AccessSitesLinks False [Num]. I understand that sortSubSite and SubSite are similar and could be combined to be more extensible, and that's part of the question.

A new business requirement is to be able to sort the SubSites alphabetically. And this is where the question comes into play. How do I take this existing code, and refactor it to continually be meeting business requirements? I can make the code sort much like I did with Home Sites, but, this doesn't seem extensible, just creating another function to be called right after. I have MOST of the variables, arrays, and functions to sort alphabetically already. Is there something I am missing from a design perspective? Is it just inexperience that is making it so I can't see how to design this properly?

EDIT

I want to clarify the question more. Yes, I am obtaining the object $(o) multiple times, and that can be inefficient. This question is more about how to redesign while coding continues as to not continually be piece-mealing code.

Answer 1

$(document).ready(function() {
  setFields();
});

function setFields() {
  var sortSite = $('.AccessSitesLinks.True');
  var arr = sortSite.map(function(_, o) {
    return {
      t: $(o).text(),
      h: $(o).attr('href'),
      c: $(o).attr('class')
    };
  }).get();
  arr.sort(function(o1, o2) {
    return o1.t > o2.t ? 1 : o1.t < o2.t ? -1 : 0;
  });

  sortSite.each(function(i, o) {

    $(o).text('+');
    $(o).attr('href', arr[i].h);
    $(o).attr('class', arr[i].c);

    $(o).wrap("<div class='ContainingBox " + arr[i].c + "'></div>");
    /// arr[i]c is: AccessSitesLinks True
    $(o).removeAttr('href');
    $(o).parent().append("<a href='" + arr[i].h + "' class='" + arr[i].c + "'>" + arr[i].t + "</a>");
  });

  var sortSubSite = $('.AccessSitesLinks.False');
  var subArr = sortSubSite.map(function(_, o) {
    return {
      t: $(o).text(),
      h: $(o).attr('href'),
      c: $(o).attr('class')
    };
  }).get();
  // Changes started from here
  subArr.sort(function(o1, o2) {
    return o1.t > o2.t ? 1 : o1.t < o2.t ? -1 : 0;
  });
  $.each(subArr, function(i, o) {
    var a = $("." + o.c.split(" ").join(".") + '[href="' + o.h + '"]');
    var n = o.c.split(" ")[2];
    a.appendTo($('.ContainingBox.AccessSitesLinks.True.' + n));
    $(a).removeClass(n).addClass(n + n).wrap("<div class='ContainingBox2'></div>");

    // Changes ended here and below commented is your code
    /*var classList = $(o).attr('class').split(/\s+/);
      
    
      	$('.ContainingBox.AccessSitesLinks.True.'+ classList[2]).append($(o));
      	$(o).wrap("<div class='ContainingBox2'></div>");
        $(o).text(subArr[i].t);
        $(o).attr('href', subArr[i].h);
       	$(o).attr('class', subArr[i].c + classList[2]);*/
  });
  $('.ContainingBox2').hide();
  $('.ContainingBox').click(function() {
    $('.ContainingBox2', this).toggle(); // p00f
  });

  $(".ContainingBox2").on({
    mouseenter: function() {
      $(this).data('bg2', $(this).css("background-color"));
      $(this).css("background-color", "#e5f2ff");
    },
    mouseleave: function() {
      $(this).css("background-color", $(this).data('bg2'));
    }
  });
}

.ContainingBox2 {
  padding: 2px 15%;
}
.AccessSitesLinks.True {
  padding: 2px 2%;
  font-size: 1.2em;
  width: 80%;
}
.AccessSitesLinks {
  text-decoration: none !Important;
  font-family: "Segoe UI", "Segoe", Tahoma, Helvetica, Arial, sans-serif;
  color: #444;
  font-size: 1em;
  width: 80%;
  margin: 2px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <a href="https://en.wikipedia.org" id="GUID" class="AccessSitesLinks True 1">Wikipedia Home</a>
  <a href="https://en.wikipedia.org/wiki/Gold" id="GUID" class="AccessSitesLinks False 1">Wikipedia Gold</a>
  <a href="https://google.com" id="GUID" class="AccessSitesLinks True 2">Google Home</a>
  <a href="https://mail.google.com/" id="GUID" class="AccessSitesLinks False 2">Google Mail</a>
  <a href="https://facebook.com/User1" id="GUID" class="AccessSitesLinks False 3">FaceBook User1</a>
  <a href="https://facebook.com" id="GUID" class="AccessSitesLinks True 3">FaceBook Home</a>
  <a href="https://facebook.org/about" id="GUID" class="AccessSitesLinks False 3">FaceBook About</a>
  <a href="https://young.com" id="GUID" class="AccessSitesLinks False 2">zzzzzz</a>
  <a href="https://younger.com" id="GUID" class="AccessSitesLinks True 0">A</a>
  <a href="https://youngest.com" id="GUID" class="AccessSitesLinks False 0">zzzzzz</a>
  <a href="https://facebook.com/a" id="GUID" class="AccessSitesLinks False 3">FaceBook a</a>
</div>

In above answer I have changed the way you were trying to sort secondary links.

I sorted the subArr first and then appended the links according to info in subArr in respective parent links.

I have marked the changed script with comments.