Jquery Clone修复

Question

所以我得到了这个jQuery克隆插件，它修复了克隆的文本区域和选择的值(复制了克隆的元素的值，包括文本区域和选择)。

代码是这样的

(function (original) {
    jQuery.fn.clone = function () {
    var result           = original.apply(this, arguments),
        my_textareas     = this.find('textarea').add(this.filter('textarea')),
        result_textareas = result.find('textarea').add(result.filter('textarea')),
        my_selects       = this.find('select').add(this.filter('select')),
        result_selects   = result.find('select').add(result.filter('select'));
        //console.log('this',this)
       //console.log('my',this.find('textarea').length,'rsult',this.filter('textarea'),length);

       for (var i = 0, l = my_textareas.length; i < l; ++i)          
            $(result_textareas[i]).val($(my_textareas[i]).val());
       for (var i = 0, l = my_selects.length;   i < l; ++i) 
            result_selects[i].selectedIndex = my_selects[i].selectedIndex;

       return result;
     };
  }) (jQuery.fn.clone);

这太完美了。然而，这些线条

my_textareas     = this.find('textarea').add(this.filter('textarea')),
result_textareas = result.find('textarea').add(result.filter('textarea')),    

我不明白的是，既然我们已经用add选择了this中的所有文本区(稍后我们循环获取值)，为什么还要再次add .filter('textarea')呢？

我的观点是

my_textareas     = this.find('textarea'),
result_textareas = result.find('textarea'), 

在没有add(filter..)的情况下应该工作得很好。

filter是不是还有其他原因？

Answer 1

find只获取子代元素。filter只获取顶级元素。

通过使用这两种方法，您可以获得集合中的任何textarea元素以及集合中元素的后代元素。

举个例子：

<div class="abc">
    <textarea id="one"></textarea>
</div>
<textarea class="abc" id="two"></textarea>

如果我们这样做：

$(".abc").find("textarea")

我们的集合将只包含id为"two“的textarea。但是，如果我们这样做：

$(".abc").filter("textarea")

我们的集合将只包含id为"one“的textarea。您发布的代码使用了这两者，这将得到“一”和“二”。