1

私はjQueryプラグインを書いています。主な目的は、select要素を取得し、それに基づいて新しいコンポーネントを作成することです。これまでのところ、selectを空の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に正しく置き換えられます。これはOKです。
しかし今、連鎖性をテストするとき、私は次のことを試みます：

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

しかし、私の新しいdivは空のままな
ので、次のことを試しました。

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

ファイアバグで私は得る：

[select#sss]

プラグインが古い選択を返していることを意味します。

追加してみました

return $(this);

後

$(this).replaceWith(div);

私のプラグインコードでは、何も変わっていません！

プラグインが新しく作成されたDivを返すようにするにはどうすればよいか教えてください。

4

1 に答える 1

3

を返すthis.eachと、元のjQuery選択が返されます。これは、これらの要素を置き換えても変更されていません。を使用する代わりに、をeach使用mapして返される内容を調整します。

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