5

I have an item list in html.

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

</ul>

I want a jquery to to auto move <li> positon like that

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

It will auto change first <li> to the last <li>

I tried, but it is not worked :(

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

Tks for help

8
  • When you want to change the position? After some time interval or anything else?
    – AB Vyas
    Apr 16, 2014 at 3:53
  • try jquery sortable. Apr 16, 2014 at 3:57
  • what do you mean by auto move? is this on event then move that particular element, or just programmatically move it on load? Apr 16, 2014 at 3:59
  • I think "auto" means not having to know the id of the element to be moved.
    – bjb568
    Apr 16, 2014 at 3:59
  • 1
    pos dup of stackoverflow.com/questions/4612955/… Apr 16, 2014 at 4:00

5 Answers 5

13

you need to use appendTo('ul')

jsfiddle example

0
5

The appendTo() method inserts HTML elements at the end of the selected elements.

so you must use this

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

Fiddle

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

The beauty of vanilla js.

2

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 }
}

The beauty of CSS.

1

Totally agree with answer of Feroz Akbar.

You can also do another way also like

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

Here is Fiddle for the same.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.