Question

我在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>

---＆GT;

<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");

寻求帮助

Answer 1

您需要使用appendTo('ul')

<强> jsfiddle example

Answer 2

appendTo（）方法在所选元素的末尾插入HTML元素。

所以你必须使用这个

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

Answer 3

Fiddle

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

vanilla js的美丽。

Answer 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的美丽。

Answer 5

完全同意Feroz Akbar的答案。

您也可以采用其他方式，例如

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

以下是Fiddle。

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

5 个答案: