Функция Zepto clone() не работает должным образом или невозможно использовать clone() в сочетании с find()?

Question

У меня есть простой слайдер изображений, 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();

- тот же результат.

Answer 1

Как уже говорилось ранее, в chrome и firefox все работает нормально, смотрите здесь.

И тогда я попробовал это в сафари. console.log(img) действительно напечатано пустым. Но потом попробовал console.log(img.length), это напечатано 1,

Так что я думаю, что в инструментах отладки Safari может быть какая-то ошибка.

Тогда я проигнорировал результат console.log() и попробуйте использовать клонированный элемент со следующим кодом:

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

чтобы увидеть, действительно ли это пусто или нет.

И результат подтвердил мое мнение. Работало нормально.

Смотрите здесь.

Answer 2

Zepto не имеет функции клонирования. Для справки, вы можете использовать этот график.

Вы можете легко реализовать клон с чем-то вроде:

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

отсюда