如何在 Jquery 中自动更改 <li> 的位置答案

【问题标题】：How to auto change position of <li> in Jquery如何在 Jquery 中自动更改 <li> 的位置
【发布时间】：2014-10-08 20:26:03
【问题描述】：

我在 html 中有一个项目列表。

<ul>
<li id="1">1</li>
<li id="2">2</li>
<li id="3">3</li>
<li id="4">4</li>

</ul>

我想要一个 jquery 来自动移动 <li> 这样的位置

<ul>
<li id="2">2</li>
<li id="3">3</li>
<li id="4">4</li>
<li id="1">1</li>
</ul>

--->

<ul>
<li id="3">3</li>
<li id="4">4</li>
<li id="1">1</li>
<li id="2">2</li>
</ul>

它会自动将第一个 <li> 更改为最后一个 <li>

我试过了，还是不行:(

var first = $("ul li:first");
var last = $("ul li:last");

求帮助

【问题讨论】：

什么时候换位置？过了一段时间或其他什么？
试试jquery sortable。
自动移动是什么意思？这是 on 事件然后移动该特定元素，还是只是在加载时以编程方式移动它？
我认为“自动”意味着不必知道要移动的元素的 id。
来自stackoverflow.com/questions/4612955/…

标签： javascript php jquery html

【解决方案1】：

你需要使用appendTo('ul')

jsfiddle example

【讨论】：

【解决方案2】：

appendTo() 方法在所选元素的末尾插入 HTML 元素。

所以你必须使用这个

$('li:first').appendTo('ul');

【讨论】：

【解决方案3】：

Fiddle

var cont = document.getElementById('container');
cont.appendChild(cont.firstChild);

vanilla js的美丽。

【讨论】：

【解决方案4】：

Fiddle

ul {
    position: relative;
}
ul li {
    position: absolute;
}
ul li:nth-child(1) {
    top: 0;
    -webkit-animation: cycle 4s steps(4, end) infinite;
}
ul li:nth-child(2) {
    top: 18px;
    -webkit-animation: cycle 4s 1s steps(4, end) infinite;
}
ul li:nth-child(3) {
    top: 36px;
    -webkit-animation: cycle 4s 2s steps(4, end) infinite;
}
ul li:nth-child(4) {
    top: 54px;
    -webkit-animation: cycle 4s 3s steps(4, end) infinite;
}
@-webkit-keyframes cycle {
    from { top: 0 }
    to { top: 72px }
}

CSS的美丽。

【讨论】：

【解决方案5】：

完全同意Feroz Akbar的回答。

你也可以做其他方式也喜欢

window.setInterval(function(){
   $('#MainUl > li:last').after($('#MainUl > li:first'));
}, 1000);

这里是Fiddle。

【讨论】：