Sortering af dynamiske links i en div

Jeg sad og legede lidt med det og kom til følgende løsning. Testet i IE8 og firefox.

<script>
var linkArray = [];
var titleArray = [];
var sortArray = [];
function sortLinks() {
    var linksDiv = document.getElementById('links');
    var children = linksDiv.childNodes;
    childNum = children.length;
   
    arrayCount = 0;
    while(childNum > 0) {
        childNum--;
        link = children[childNum].innerHTML;
        if(link != undefined) {
            linkArray[arrayCount] = children[childNum];
            titleArray[arrayCount] = link;
            sortArray[arrayCount] = link;
            arrayCount++;
        }
    }
    sortArray.sort();

    linksDiv.innerHTML = "";
    for (s in sortArray) {
        thisIndex = titleArray.findIndex(sortArray[s]);
        if (thisIndex != -1) {
            var newLink = document.createElement('a');
            newLink.setAttribute('href',linkArray[thisIndex]);
            //newLink.setAttribute('class','linkClass');
            newLink.innerHTML = titleArray[thisIndex];
            linksDiv.appendChild(newLink);
            // tilføj evt. flere elementer der skal placeres efter linket her.
        }
    }

}

Array.prototype.findIndex = function(value){
    for (var i=0; i < this.length; i++) {
        if (this[i] == value) {
            return i;
        }
    }
    return -1;
};

</script>

Alternativt kan du bruge et framework som jQuery. Det er sikkert betydeligt nemmere :)

Hej.

Det ser vildt interessant ud! Du er for sej. Det virker fint - den sorterer som den skal.

Jeg er ikke selv så skarp til javaScript - måske kan du svare kort på følgende:
Jeg kunne godt tænke mig, at der kom et '&nbsp;' efter hvert link - hvor angiver jeg det i scriptet?

Og ville man kunne sortere alfabetisk den modsatte vej?

Men pointene er i hvert fald dine. :)

Som jeg lavede det, indsatte den bare et link ('a') element i koden. Det kan nok gøres lidt mere fleksibelt hvis man bruges ren HTML til at indsætte de nye links.

Så hvis du ændrer:
----
linksDiv.innerHTML = "";
    for (s in sortArray) {
        thisIndex = titleArray.findIndex(sortArray[s]);
        if (thisIndex != -1) {
            var newLink = document.createElement('a');
            newLink.setAttribute('href',linkArray[thisIndex]);
            //newLink.setAttribute('class','linkClass');
            newLink.innerHTML = titleArray[thisIndex];
            linksDiv.appendChild(newLink);
            // tilføj evt. flere elementer der skal placeres efter linket her.
        }
    }
----

til:
----
    var linksHTML = "";
    for (s in sortArray) {
        thisIndex = titleArray.findIndex(sortArray[s]);
        if (thisIndex != -1) {
            linksHTML += '<a href="'+linkArray[thisIndex]+'">'+titleArray[thisIndex]+'</a> ';
        }
    }
    linksDiv.innerHTML = linksHTML;
----

Bruger den HTML i stedet, så der kan du ændre linket i linksHTML variablen.

Hvis du vil sortere den anden vej, kan du bare gøre så den i stedet indsætter links 'modsat' i variablen.
Ved at ændre:
linksHTML += '<a href="'+linkArray[thisIndex]+'">'+titleArray[thisIndex]+'</a> ';

til:
linksHTML = '<a href="'+linkArray[thisIndex]+'">'+titleArray[thisIndex]+'</a> ' + linksHTML;

Nu jeg var igang lavede jeg den lige lidt mere fleksibel, så den bare kan kaldes med sorteringsretning og div id.

Her er det samlede script, med test eksempler:

<script>
function sortLinks(linkDiv, sortDir) {
    var linkArray = [];
    var titleArray = [];
    var sortArray = [];
    var linksDiv = document.getElementById(linkDiv);

    var children = linksDiv.childNodes;
    childNum = children.length;
   
    arrayCount = 0;
    while(childNum > 0) {
        childNum--;
        link = children[childNum].innerHTML;
        if(link != undefined) {
            linkArray[arrayCount] = children[childNum];
            titleArray[arrayCount] = link;
            sortArray[arrayCount] = link;
            arrayCount++;
        }
    }
    sortArray.sort();

    var linksHTML = "";
    for (s in sortArray) {
        thisIndex = titleArray.findIndex(sortArray[s]);
        if (thisIndex != -1) {
            thisLink = '<a href="'+linkArray[thisIndex]+'">'+titleArray[thisIndex]+'</a> ';

            if (sortDir == 'desc') linksHTML = thisLink + linksHTML;
            else linksHTML += thisLink;
        }
    }
    linksDiv.innerHTML = linksHTML;

}

Array.prototype.findIndex = function(value){
    for (var i=0; i < this.length; i++) {
        if (this[i] == value) {
            return i;
        }
    }
    return -1;
};

</script>

<div id="links">
    <a href="#">d-link</a>
    <a href="#">c-link</a>
    <a href="#">a-link</a>
    <a href="#">b-link</a>
</div>
<br />
<a href="#" onclick="sortLinks('links', 'asc');">sort asc</a> <a href="#" onclick="sortLinks('links', 'desc');">sort desc</a>

Det er helt genialt! Tusind tak for din hjælp. :)

Mvh.

Det var så lidt :)