Question

我有一张图片列表。程序启动时我想克隆列表并在其前面添加。到目前为止，这是我的代码：

var children = $("#imageList").children().clone();

$("#imageList").prepend(children);

为什么这不会克隆列表中的孩子？当我测试程序时，我只有原始列表。

更新：以下是图片列表：

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

这不仅仅是一个图像列表。每个图像顶部都有一个与该图像相关的链接。图像将动画（使用.animate（））循环播放。我需要追加并预先添加图像，以便我所创造的“循环”将是无穷无尽的。

Answer 1

确保您的代码位于jQuery“ready”处理程序中：

$(function() {

  var children = $("#imageList").children().clone();

  $("#imageList").prepend(children);
});

如果您在<script>的{{1}}块中运行该代码，那么DOM中将不会有任何元素，因此代码将不执行任何操作。

您也可以添加一个简单的脚本块（只是您的代码，已发布），放在列表和图像等之后。

Answer 2

如果没有看到你的HTML，就很难说出错了什么。如果您想要预先列出列表中的子项，则代码看起来是正确的。看我的例子：

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

克隆列表项Jquery

2 个答案: