Question

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

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

Answer 1

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

return this.map(function(){                
    var div = $('<div></div>');
    $(this).replaceWith(div);
    return div;
});

jQuery插件可链接性

1 个答案: