Сортировка на основе нескольких CSS-классов и создание кода с помощью JQuery

Этот вопрос в первую очередь сосредоточен на том, как управлять кодом во время разработки, сделать его очень адаптируемым и т.д. Позвольте мне объяснить в этом примере, и это будет иметь больше смысла. "Я добавлю щедрость, если мне нужно".

Наш сервер привязан к памяти, и мы прилагаем много усилий для сортировки на стороне клиента с помощью Javascript/Jquery, чтобы облегчить эти проблемы. Вот скрипка, если вы хотите следовать за ней. https://jsfiddle.net/ydc6ywuz/23/

Проблема связана с этим кодом.

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

Каждый Home сайт будет иметь класс AccessSitesLinks True [Num]. Таким образом, все его подсайты имели бы AccessSitesLinks False [Num]. Я понимаю, что sortSubSite и SubSite похожи и могут быть объединены, чтобы быть более расширяемыми, и эта часть вопроса.

Новое деловое требование состоит в том, чтобы сортировать SubSites в алфавитном порядке. И здесь возникает вопрос. Как мне взять этот существующий код и реорганизовать его, чтобы он постоянно отвечал требованиям бизнеса? Я могу сделать код очень похожим на Home Sites, но это не кажется расширяемым, просто создавая еще одну функцию, которую нужно вызвать сразу после. У меня есть MOST переменные, массивы и функции для сортировки по алфавиту уже. Есть ли что-то, чего я не вижу с точки зрения дизайна? Это просто неопытность, которая делает это, поэтому я не могу понять, как правильно это сделать?

ИЗМЕНИТЬ

Я хочу уточнить этот вопрос. Да, я получаю объект $(o) несколько раз, и это может быть неэффективным. Этот вопрос больше связан с тем, как перепроектировать в то время, когда кодирование продолжается, так как он не является постоянно компрометирующим кодом.

Ответ 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="#" onclick="location.href='https://en.wikipedia.org'; return false;" id="GUID" class="AccessSitesLinks True 1">Wikipedia Home</a>
  <a href="#" onclick="location.href='https://en.wikipedia.org/wiki/Gold'; return false;" id="GUID" class="AccessSitesLinks False 1">Wikipedia Gold</a>
  <a href="#" onclick="location.href='https://google.com'; return false;" id="GUID" class="AccessSitesLinks True 2">Google Home</a>
  <a href="#" onclick="location.href='https://mail.google.com/'; return false;" id="GUID" class="AccessSitesLinks False 2">Google Mail</a>
  <a href="#" onclick="location.href='https://facebook.com/User1'; return false;" id="GUID" class="AccessSitesLinks False 3">FaceBook User1</a>
  <a href="#" onclick="location.href='https://facebook.com'; return false;" id="GUID" class="AccessSitesLinks True 3">FaceBook Home</a>
  <a href="#" onclick="location.href='https://facebook.org/about'; return false;" id="GUID" class="AccessSitesLinks False 3">FaceBook About</a>
  <a href="#" onclick="location.href='https://young.com'; return false;" id="GUID" class="AccessSitesLinks False 2">zzzzzz</a>
  <a href="#" onclick="location.href='https://younger.com'; return false;" id="GUID" class="AccessSitesLinks True 0">A</a>
  <a href="#" onclick="location.href='https://youngest.com'; return false;" id="GUID" class="AccessSitesLinks False 0">zzzzzz</a>
  <a href="#" onclick="location.href='https://facebook.com/a'; return false;" id="GUID" class="AccessSitesLinks False 3">FaceBook a</a>
</div>