Zepto's clone()函数不能正常工作或不能将clone()与find()结合使用

Zepto's clone() function not working properly or not possible to use clone() in combination with find()?

本文关键字：不能 clone 工作 结合 find 函数 常工作 Zepto      更新时间：2023-09-26

我有一个简单的图像滑块，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变量时，它显示空对象。我认为问题是find()函数，因为当我这样做时:

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

img变量不为空—控制台输出显示克隆的li元素。这是一个bug还是我不能将clone()函数与find()结合使用?

编辑:

我也试过这个:

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

-相同的结果

正如之前讨论的那样，在chrome和firefox中它工作得很好，见这里。

然后我在safari中尝试了一下。console.log(img)确实打印为空。但当我尝试console.log(img.length)时，它打印的是1。

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

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

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

查看是否真的为空

结果证明了我的观点。它工作得很好。

。

Zepto没有克隆功能。作为参考，你可以使用这个图表。

你可以很容易地实现克隆，如:

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

。

相关文章：