Search code examples
javascriptclonezepto

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


I have a simple image-slider, the html looks like this:

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

Now I want to add some thumbs to it to have an overview of the images. I want to create the thumbs from the images in the slides. I am using Zepto and tried the following to get the images and create new ones:

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

Now when you spit out the img var in the console, it shows empty objects. I think the problem is the find() function, because when I do this:

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

the img var is not empty – the console output shows the cloned li elements. Is this a bug or can I not use the clone() function in combination with find() ?

Edit:

I also tried this:

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

– same result.


Solution

  • As the discussion before, in chrome and firefox it works fine, see here.

    And then I tried it in safari. console.log(img) indeed printed empty. But then I tried console.log(img.length), it printed 1.

    So I think there maybe some bug in safari's debug tools.

    Then I ignored the result of console.log() and try to use the cloned element with the following code:

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

    to see whether it is really empty or not.

    And the result proved my opinion. It worked fine.

    See here.