CODEWITHSUNDEEP
jquery
Soatl
Soatl

Reputation: 10592

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.

Upvotes: 0

Views: 6960

Answers (2)

brendan
brendan

Reputation: 29976

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

Upvotes: 1

Pointy
Pointy

Reputation: 413717

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.

Upvotes: 3

Related Questions