Question

我遇到了jQuery中clone()函数的奇怪问题，我无法弄清楚是什么导致它。

我正在尝试创建一个滑块jQuery插件，在这个插件中我克隆了第一个滑块元素并将其附加到滑块容器。当页面上只有一个滑块时，这一切都很有效。但是当页面上有两个滑块时，clone()函数似乎将克隆的元素附加到两个滑块上。
导致每个滑块都有两个额外的元素，类cloned而不是一个。

我将我的插件代码包装在this.each(function() {...}中接下来，我从$(this)定义滑块变量，并在我的插件中选择每个jQuery，我将上下文作为第二个参数传递：$('.slider-item', slider)。
据我所知，应该找到并且只应将克隆元素附加到slider-container slider（因此$(this)）上下文。

请告诉我我做错了什么。

以下是codepen的链接：http://codepen.io/Bogardo/pen/zdnuK

以下是不喜欢codepen的人的代码：

我有以下HTML标记：

<div class="container">
  <div class="slider">
    <ul class="slider-container">
      <li class="slider-item">1</li>
      <li class="slider-item">2</li>
      <li class="slider-item">3</li>
    </ul>
  </div>
  <div class="slider">
    <ul class="slider-container">
      <li class="slider-item">1</li>
      <li class="slider-item">2</li>
      <li class="slider-item">3</li>
    </ul>
  </div>
</div>
<script type="text/javascript">
    $('.slider').slider();
</script>

以下是我的插件的精简版：

(function($){
    $.fn.slider = function() {

        this.each(function() {  

            var slider = $(this),
            items = $('.slider-item', slider);

            items.first()
                .clone()
                .appendTo('.slider-container', slider)
                .addClass('clone');
        });  

        return this;  
    };
})(jQuery);

Answer 1

你确定appendTo支持多个参数的语法吗？

也许，你应该试试这个：

.appendTo(slider.find('.slider-container'))

jQuery clone（）函数插件中的奇怪行为

1 个答案: