Question

我有一个未订购商品的清单。在该商品清单中，点击的元素应该位于订单的第一个位置，而点击元素之前的其余元素应该到达列表中的最后一个位置。 / p>

例如：我按顺序列出了这样的元素列表

Item1 Item2 Item3 Item4 Item5 Item6 Item7 Item8

如果我点击链接“Item4”，那么Item4应该在Item1的位置，而Item4之前的项目应该在Item8旁边，如下所示

Item4 Item5 Item6 Item7 Item8 Item1 Item2 Item3

请查看此要求： -

我还有一个更多的要求，就像这里我列出的那样，当元素列表增加元素进入下一行时。所以我想在列表的两端保留两个箭头。点击这些箭头左侧箭头或右侧错误列表应按箭头方向移动

例如： * 点击 *

之前

＆LT;＆LT; Item1 Item2 Item3 Item4 Item5 Item6 Item7 Item8 Item9 ＆gt;＆gt; Item10 Item11 Item12

点击右侧箭头后

Item1 ＆lt;＆lt; Item2 Item3 Item4 Item5 Item6 Item7 Item8 Item9 Item10 ＆gt;＆gt; Item11 Item12

它应该支持这个及以上的要求。 请使用jquery轮播或使用任何滑块帮助我解决此问题

提前致谢

Answer 1

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

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/

使用jquery将单击的元素放在元素列表中的第一个位置的代码

请查看此要求： -

2 个答案: