1

我正在编写一个jQuery插件，主要目的是获取一个选择元素并基于它创建一个新组件，到目前为止我只想用一个空的div替换选择：

(function($){
    $.fancySelect = {version:'1.0'};
    var methods = {
        init: function(options){
            return this.each(function(){                
                var div = $('<div></div>');
                $(this).replaceWith(div);
            });
        }
    };
    $.fn.fancySelect = function(method){
        if (methods[method]){//call a method
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else {
             return methods.init.apply( this, arguments );
        }
    }
})(jQuery);

为了测试，我做了一个简单的选择：

<select id="sss"></select>

当我打电话时：

$('#sss').fancySelect();

选择正确地替换为空的 Div，这没关系。
但是现在，在测试可链性时，我尝试：

$('#sss').fancySelect().append('<span>new text</span>');

但是我的新 div 仍然是空的
所以我尝试了：

console.log($('#sss').fancySelect());

在萤火虫上，我得到：

[select#sss]

意味着插件正在返回旧的选择。

我试图添加

return $(this);

后

$(this).replaceWith(div);

在我的插件代码中，但没有任何改变！

你能告诉我我应该怎么做才能让我的插件返回新创建的 Div 吗？

4

1 回答 1

3

当您 return 时this.each，您将返回原始的 jQuery 选择，即使您替换了这些元素，它也没有改变。而不是使用each，使用map来调整返回的内容：

return this.map(function(){                
    var div = $('<div></div>');
    $(this).replaceWith(div);
    return div;
});
于 2012-05-10T16:12:21.010 回答