Sort based on array

Question

I am having issues on sorting based on array. Let's say I have something like this:

HTML:

<button onClick="sortfunc();">Sort</button>
<ul id="sortable">
  <li id="a">is </li>
  <li id="b">awesome</li>
  <li id="c">very </li>
  <li id="d">javascript </li>
  <li id="e">hard </li>
  <li id="f">but </li>
</ul>

Now I want to use an external button to sort it out and sort final value equal to d a c e f b order.

Javascript:

$(function() {
    $( "#sortable" ).sortable();
});
function sortfunc() {
    var idsInOrder = $("#sortable").sortable("toArray");
        console.log(idsInOrder);
        //Print: ["a", "b", "c", "d", "e", "f"]
    var sorttoarray = ["d","a","c","e","f","b"];
    //Do something here to sort the ul li to match sorttoarray

}

I print out the array but it is not in the order as expected. Is it possible to use external button to sort out the above sortable to the id as indicated?

EDIT so id starts with letter.

"ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters.." http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html can we change the `id` or use a `data-id` or even better a `data-sorty-id`? — caramba, Jul 30 '15 at 19:28
it was just an example, maybe not the best one. let me change it so it starts with letter — SQLNub, Jul 30 '15 at 19:29
If you have a sortable element (that meaning you want to allow the user to sort it), why do you choose to sort it in a seemingly arbitrary fashion? — Mike Brant, Jul 30 '15 at 19:58
If I set it to sort to 1 2 3 4 5. Then someone would suggest to using .sort, which isn't the focus. I was just planning on sorting based on another array. Someone suggested to sort it using letters, so i changed it too to reflect it. I think I got the whole question thrown off the track a bit. Title was changed too :S — SQLNub, Jul 30 '15 at 20:04

score 1 · Accepted Answer · answered Jul 30 '15 at 19:38

Here's how you can accomplish this (I've altered the HTML a bit, as you don't need the jQuery UI sortable functionality):

<button id="doSomething">Sort</button>
<ul id="sortable">
  <li id="1">is </li>
  <li id="2">awesome</li>
  <li id="3">very </li>
  <li id="4">javascript </li>
  <li id="5">hard </li>
  <li id="6">but </li>
</ul>

And here's my JavaScript:

function sortfunc() {
    var liItems = $("#sortable li");
    var sorttoarray = ["4","1","3","5","6","2"];

    $("#sortable").empty();

    for (var i = 0; i < sorttoarray.length; i++) {
        $("#sortable").append(liItems.filter("#" + sorttoarray[i]));
    }
}

$("#doSomething").click(function () {
    sortfunc(); 
});

Here's the working jsfiddle: http://jsfiddle.net/odmrxwxr/

Ultimately all I do here is save off the li elements, empty the parent ul, and then loop through the array for the order, and when I reach the next desired element that should be in the order, I just append() it back.

But you lose the sortable functionality? I was thinking just empty out the ul and re-add it. Wasn't hoping to go that route tho — SQLNub, Jul 30 '15 at 19:41
Thank you for the suggestion.. was hoping for a way to actually keep the sortable part so you can go in and swap the order then.. save it. and use the order later. — SQLNub, Jul 30 '15 at 19:48
I'll just go with your idea and delete all and re-add. Thank you so much for your help! — SQLNub, Jul 30 '15 at 19:52

Sort based on array

1 Answers1