код для размещения выбранного элемента в первой позиции в списке элементов с использованием jquery

Question

У меня есть список неупорядоченных элементов. В этом списке элементов выбранный элемент должен занимать первую позицию в заказе, а остальные элементы, предшествующие нажатому элементу, должны занимать последнюю позицию в списке.

например: у меня есть список таких элементов в следующем порядке:

Item1 Item2 Item3 Item4 Item5 Item6 Item7 Item8

предположим, что если я нажму на ссылку "Item4", то Item4 долженбыть в позиции Item1, а предметы, предшествующие Item4, должны располагаться рядом со средством Item8, как показано ниже

Item4 Item5 Item6 Item7 Item8 Item1 Item2 Item3

Пожалуйста, ознакомьтесь с этим требованием: --

У меня есть еще одно требование, подобное приведенному здесь, у меня есть такой список, когда список элементов увеличивается, элементы переходят на следующую строку.поэтому я хочу сохранить две стрелки на обоих концах списка. При нажатии этих стрелок либо на левую, либо на правую сторону список должен двигаться в соответствии с направлением стрелки

Например: * Перед нажатием *

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

После нажатия стрелки вправо:

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

Это должно поддерживать это и выше требование. Пожалуйста, помогите мне решить эту проблему с помощью карусели jquery или ползунков

Заранее спасибо

Answer 1

попробуйте это :

$(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());
    });
});​

Answer 2

Вы могли бы сделать

$('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>

скрипка здесь http://jsfiddle.net/c4GNq/