追加函数在自定义JQuery函数上无效

Question

我正在尝试在JQuery上创建一个简单的函数...添加元素。这是代码，但它不起作用

(function ($) {
    $.fn.dataProvider = function (array) {
        console.log(this);
        console.log(array);
        $.each(array, function (index, value) {
            $(this[0]).append("<option value = '" + index + "' >" + value + "</option>");
        });
    };
})(jQuery);

但这有效！

$.each(array, function (index, value) {
    $(this[0]).append("<option value = '" + index + "' >" + value + "</option>");
});

我无法理解为什么......有人可以帮助我吗？

Answer 1

如果要创建插件，则需要返回this元素以保持可链接性：

LIVE DEMO

(function($) {
  $.fn.dataProvider = function(arr) {

    var that = this;
    var opts = ""; 

    return that.each(function(){
       for(var i=0; i<arr.length; i++){
         opts += "<option value='"+ i +"'>"+ arr[i] +"</option>";
       }
       that.append( opts ); // Append only once // Faster!
    });

  };
})(jQuery);

插件可链接性示例：

var arr = ["foo", "bee"];
$('#sel').dataProvider( arr ).css({color:"red"});