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.." stackoverflow.com/questions/70579/… can we change the id or use a data-id or even better a data-sorty-id? — caramba
– caramba, Commented Jul 30, 2015 at 19:28
it was just an example, maybe not the best one. let me change it so it starts with letter — SQLNub
– SQLNub, Commented Jul 30, 2015 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
– Mike Brant, Commented Jul 30, 2015 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
– SQLNub, Commented Jul 30, 2015 at 20:04

Thomas Stringer · Accepted Answer · 2015-07-30 19:38:10Z

1

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.

answered Jul 30, 2015 at 19:38

Thomas Stringer

5,9123 gold badges28 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

SQLNub Over a year ago

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 Over a year ago

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 Over a year ago

I'll just go with your idea and delete all and re-add. Thank you so much for your help!

Collectives™ on Stack Overflow

Sort based on array

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related