Question

我有一个非常粗糙的jQuery插件，用css样式的div包装一个复选框并隐藏实际的复选框。我在输入元素上运行插件，但是希望插件返回包含div以进行链接，因为输入元素是不可见的。

(function ($) {

var methods = {       

    'init': function (options) {

        var settings = $.extend({
            'location' : 'top',
            'background-color' : 'blue'
        }, options);            

        return this.each(function () {  
            var $this = $(this);
            var checked = $this.attr('checked') || '';
            $this.wrap('<div class="styled-checkboxes ' + checked + '"></div>');
            return $(this).parent('.styled-checkboxes')[0];
        });
    }           
};

$.fn.styledCheckboxes = function (method) {

    if (methods.method) {
        //
    } else if (typeof options === 'object') {
        return methods.init.apply(this, options);
    } else {
        console.log('init without options');
        return methods.init.apply(this, null);
    }        
}
})(jQuery);

当我这样调用插件时：

console.log(
    $('input[type="checkbox"]').styledCheckboxes().after('<p>hello world</p>')
);

附加的p在复选框之后添加，而不是div，控制台跟踪是一个jQuery选择，包含我在页面上的任何输入项，而不是包装输入的div。为什么是行

return $(this).parent('.styled-checkboxes')[0];

不将div作为用于链接的对象返回？

Answer 1

原因是因为返回each内的任何内容都不会覆盖返回的对象... each的返回始终是集合本身。

您可以返回this.map的结果，它应该按预期工作，因为map仍将枚举列表中的所有项目，您可以操作返回的项目：

return this.map(function () {  
        var $this = $(this);
        var checked = $this.attr('checked') || '';
        $this.wrap('<div class="styled-checkboxes ' + checked + '"></div>');
        return $(this).parent('.styled-checkboxes')[0];
    });

实例：http://jsfiddle.net/wBUzP/（“你好世界”在新添加的div之外）

如何让jQuery插件返回链接的特定元素

1 个答案: