Specific ordering of a list without a plugin

Question

Specific ordering of a list without a plugin

Navigation

#1 by (1 votes)
#2 by (0 votes)

2

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

Next 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

Always only the list item will be visible in position 1. As shown in the image below:

Ifyoucanhelp,followthe jsfiddle , with a test base, either done in pure JS or jQuery.

javascript jquery slide

asked by anonymous 29.01.2015 / 14:40

2 answers

How to change the menu position using the scrollTo function? How to do update via ajax + php

score 1 · 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

score 0 · Answer 2

Based on your JsFiddle, I have 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 is not so common to use them in jQuery , here's a brief explanation:

insertAfter = Inserts a given value after the specified element

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

We're basically saying to jQuery : "look for the element that has the data-position equal to the position of the current clicked link and insert it after the first element of the list"

Code updated on jsFiddle