Sortieren basierend auf mehreren CSS-Klassen und Entwerfen von Code mit Jquery

Question

Diese Frage konzentriert sich hauptsächlich darauf, wie Code während der Entwicklung verwaltet wird, wodurch er sehr anpassungsfähig ist. Lassen Sie mich dies anhand dieses Beispiels erklären. "Ich werde Kopfgeld hinzufügen, wenn ich muss".

Unser Server ist für Speicher reserviert und wir schieben eine Menge Sortierarbeit mit Javascript/Jquery auf die Client-Seite, um diese Probleme zu lindern. Hier ist die Geige, wenn Sie mitkommen möchten. https://jsfiddle.net/ydc6ywuz/23/

Das Problem kommt mit diesem 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]); 
     }); 

Jede Home Website wird AccessSitesLinks True [Num] die Klasse haben. Alle Unterwebsites hätten also AccessSitesLinks False [Num]. Ich verstehe, dass sortSubSite und SubSite ähnlich sind und kombiniert werden könnten, um erweiterbarer zu sein, und das ist ein Teil der Frage.

Eine neue Geschäftsanforderung besteht darin, die SubSites alphabetisch sortieren zu können. Und hier kommt die Frage ins Spiel. Wie nehme ich diesen bestehenden Code und überarbeite ihn, um die Geschäftsanforderungen kontinuierlich zu erfüllen? Ich kann die Code-Sortierung so machen, wie ich es mit Home Sites gemacht habe, aber das scheint nicht erweiterbar zu sein, sondern einfach eine andere Funktion zu erstellen, die direkt danach aufgerufen wird. Ich habe MOST der Variablen, Arrays und Funktionen bereits alphabetisch zu sortieren. Gibt es etwas, das mir aus Design-Perspektive fehlt? Ist es nur Unerfahrenheit, die es so macht, dass ich nicht sehen kann, wie man das richtig gestaltet?

EDIT

ich die Frage mehr klären wollen. Ja, ich erhalte das Objekt $(o) mehrmals, und das kann ineffizient sein. Bei dieser Frage geht es mehr darum, wie das Redesign während des Codierens fortgesetzt wird, um nicht fortwährend Code zu sein.

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+/); 
 
     
 
    
 
     \t $('.ContainingBox.AccessSitesLinks.True.'+ classList[2]).append($(o)); 
 
     \t $(o).wrap("<div class='ContainingBox2'></div>"); 
 
     $(o).text(subArr[i].t); 
 
     $(o).attr('href', subArr[i].h); 
 
     \t $(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 oben Antwort, die ich die Art und Weise verändert haben Sie sekundäre Links zu sortieren versuchten.

Ich sortierte zuerst die subArr und fügte dann die Links gemäß den Informationen in subArr in jeweiligen übergeordneten Links hinzu.

Ich habe das geänderte Skript mit Kommentaren markiert.