code for putting the clicked element at the first position in a list of elements using jquery

0
votes

I have a list of un ordered items.In that list of items the clicked element should come to the first position in the order and the remaining elements which are prior the clicked element should come to the last position in the list.

for example: I have a list of elements like this in order

Item1 Item2 Item3 Item4 Item5 Item6 Item7 Item8

suppose if i clicked the link "Item4" then Item4 should be in the position of Item1 and the items which are prior to Item4 should come next to the Item8 means like below

Item4 Item5 Item6 Item7 Item8 Item1 Item2 Item3

Please look into this requirement:--

I have one more requirement like here i hav list like this when elements list increases the elements are coming to the next line . so i want to keep two arrows at the both the ends of the list.On clicking of those arrows either left side arrow or right side error the list should move according to the arrow direction

For Example: *Before clicking*

<< Item1 Item2 Item3 Item4 Item5 Item6 Item7 Item8 Item9 >> Item10 Item11 Item12

After clicking right side arrow:

Item1 << Item2 Item3 Item4 Item5 Item6 Item7 Item8 Item9 Item10 >> Item11 Item12

It should support this and above requirement. Please please help me in resolving this problem by using jquery carousel or by using any sliders

Thanks in advance

2
jqueryjquery-plugins

2 Answers

2
votes

try this one:

$(function() {
    $('ul').on('click', 'li', function() {
        //cache clicked element
        var clickedItem = $(this);

        //get next siblings and self, and append to first position
        clickedItem.nextAll().andSelf().prependTo(clickedItem.parent());
    });
});​
1
votes

You could do

$('li').click(function(){
   var lis =  $(this).nextAll().andSelf();
   $(this).parent().prepend(lis)
});

html

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ul>

fiddle here http://jsfiddle.net/c4GNq/