Specific sorting of a list without plugin

Question

I’m facing a very specific problem in a project. I am creating slide, where I need to sort the list according to what is clicked in the pagination. It should look like this:

Following form:

Quando clico na paginação no item 3, a lista deve ficar da seguinte forma:

Lista original:       Lista MO
0                            2
1                           *3*
2                            4
3                            0
4                            1


----------


Quando clico na paginação no item 2, a lista deve ficar da seguinte forma:

Lista original:        Lista MO
0                            1
1                           *2*
2                            3
3                            4
4                            0


----------


Quando clico na paginação no item 0, a lista deve ficar da seguinte forma:

Lista original:        Lista MO
0                            4
1                           *0*
2                            1
3                            2
4                            3

Only the list item at position 1 will always be visible. As shown in the image below:

Anyone who can help, follow the jsfiddle, with a basis for testing, either it can be done in pure JS or jQuery.

Answer 1

With the help of the staff of the Jquery Brasil group, I was able to solve the problem. For those interested in seeing the result:

<ul class="list">
    <li data-position="0">0</li>
    <li data-position="1">1</li>
    <li data-position="2">2</li>
    <li data-position="3">3</li>
    <li data-position="4">4</li>
</ul>

<ul class="pagination">
    <a href="#" data-position="0">0</a>
    <a href="#" data-position="1">1</a>
    <a href="#" data-position="2">2</a>
    <a href="#" data-position="3">3</a>
    <a href="#" data-position="4">4</a>
</ul>

$(function(){
    var list = $(".list li");
    var newList = new Array();

    $(".pagination a").bind("click", function(){
        var pageSelected = $(this);
        var afterPage = list.slice(pageSelected.data("position") - 1,list.length);
        var beforePage = list.slice(0, pageSelected.data("position") - 1);

        afterPage.each(function(a,b){
            newList.push(b);
        });

        beforePage.each(function(a,b){
            newList.push(b);
        });

        $(".list").append(newList);
    });
});

jsfiddle

Answer 2

Based on your Jsfiddle, I created this solution for your problem.

Example:

$(function(){

    $('.pagination').find('a').click(function(e){

        e.preventDefault();

        var pos = $(this).data('position');

        var $list = $('.list').find('li');

        $list
         .filter('[data-position='+pos+']')
         .insertAfter($list.first());

    })

});

Because it’s not so common for them to use jQuery, here is a brief explanation:

insertAfter = Inserts a certain value after the specified element

filter = From the list of current elements, take the elements that match the values passed in the parameter. In the above case, we are specifying that the element has to have the data-position equal to data-position of the clicked link.

We’re basically saying to the jQuery: "find the element that has the date-position equal to the position of the current clicked link and insert it after the first element of the list"

Updated code on jsFiddle