Cloning list items Jquery
I have a list of images. When the program starts I want to clone the list and prepend it. This is my code so far:
var children = $("#imageList").children().clone();
$("#imageList").prepend(children);
Why will this not clone the children in the list? When I test the program I only have the original list.
Update: Here is the image list:
<ul id = "imageList"> <!-- List of scrolling images -->
<li id = "image1" class = "ImagesScroller">
<div>
<a href "www.url.com">Somethimes Click This</a>
</div>
<div>
<img src = "Image1" height = "200" width = "500" alt = "/" />
</div>
</li>
<li id = "image2" class = "ImagesScroller">
<div>
<a href = "www.url.com">Always Click This</a>
开发者_如何学运维 </div>
<div>
<img src = "Image2" height = "200" width = "500" alt = "/" />
</div>
</li>
<li id = "image3" class = "ImagesScroller">
<div>
<a href = "www.url.com">Don't Click This</a>
</div>
<div>
<img src = "Image3" height = "200" width = "500" alt = "/" />
</div>
</li>
<li id = "image4" class = "ImagesScroller">
<div>
<a href = "www.url.com">Click This (On Tuesdays)</a>
</div>
<div>
<img src = "Image4" height = "200" width = "500" alt = "/" />
</div>
</li>
</ul>
It isn't just a list of images. Each image has a link on top of it that goes with that image. The images will animate (using .animate()) to cycle through. I need to append and prepend images so that the "loop" that I am making will be endless.
Make sure your code is inside a jQuery "ready" handler:
$(function() {
var children = $("#imageList").children().clone();
$("#imageList").prepend(children);
});
If you run that code in a <script> block in the <head>, then there won't be any elements in the DOM yet, so the code won't do anything.
You could alternatively put a simple script block (just your code, as posted), placed after the list and the images etc.
Without seeing your HTML it's hard to say what might be wrong. If you want to pre-pend children of a list your code looks correct. See my example:
HTML:
<ul id="list">
<li><img src="/some/image1.jpg" /></li>
<li><img src="/some/image2.jpg" /></li>
<li><img src="/some/image3.jpg" /></li>
</ul>
jQuery:
$(document).ready(function(){
var children = $("#list").children().clone();
$("#list").prepend(children);
});
加载中,请稍侯......
精彩评论