Zepto的clone()函数无法正常工作或无法将clone()与find()结合使用?

时间:2013-03-07 10:39:27

标签: javascript clone zepto

我有一个简单的图像滑块,html看起来像这样:

<ul id="gallery-slider">
    <li class="slide-li" >
        <img src="img1.png" width="1024" height="590" alt="img1">
    </li>
    <li class="slide-li" >
        <img src="img2.png" width="1024" height="590" alt="img2">
    </li>
    <li class="slide-li" >
        <img src="img3.png" width="1024" height="590" alt="img3">
    </li>
    ...
</ul>

现在我想添加一些拇指来概述图像。我想从幻灯片中的图像创建拇指。我正在使用Zepto并尝试以下方法来获取图像并创建新图像:

//imageSlider is the image slider instance in use

for (var i = 1; i <= imageSlider.length; i++) {
    //find the image in li
    var img = $('#gallery-slider li').eq(i-1).find('img').clone().attr({'width': 268, 'height': 172});
        //view cloned element in console
        console.log(img);
    ...
    //here the img var will get pushed into an array
}

现在,当您在控制台中吐出img var时,它会显示空对象。我认为问题是find()函数,因为当我这样做时:

var img = $('#gallery-slider li').eq(i-1).clone();

img var不为空 - 控制台输出显示克隆的li元素。这是一个错误还是我不能将clone()函数与find()?

结合使用

修改:

我也试过这个:

var img = $('#gallery-slider li').eq(i-1).find('img'),
    thumb = img.clone();

- 结果相同。

2 个答案:

答案 0 :(得分:1)

如前所述,在chrome和firefox中它运行正常,请参阅here

然后我在野生动物园尝试过。 console.log(img)确实是空的。但后来我尝试了console.log(img.length),它打印了1

所以我认为在safari的调试工具中可能存在一些错误

然后我忽略了console.log()的结果,并尝试使用以下代码克隆元素:

$('#gallery-slider').after(img);

看它是否真的是空的。

结果证明了我的意见。它工作正常。

请参阅here

答案 1 :(得分:0)

Zepto没有克隆功能。作为参考,您可以使用this chart

您可以使用以下内容轻松实现克隆:

    $.fn.clone = function(){
          var ret = $();
          this.each(function(){
               ret.push(this.cloneNode(true))
          });
        return ret;
    };

来自here