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

我有一个非常粗糙的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); 

（函数（$）{
var方法={
“init”：函数（选项）{
变量设置=$.extend({
“位置”：“顶部”，
“背景色”：“蓝色”
}，选项）；
返回此.each（函数（）{
var$this=$（this）；
var checked=$this.attr（'checked'）| |'；
$this.wrap（“”）；
返回$（this.parent（'.styled复选框'）[0]；
});
}           
};
$.fn.styledCheckBox=函数（方法）{
if（methods.method）{
//
}else if（typeof options==='object'）{
return methods.init.apply（这是选项）；
}否则{
log（'init不带选项'）；
return methods.init.apply（this，null）；
}        
}
})（jQuery）；

当我这样调用插件时：

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

console.log(
$（'input[type=“checkbox”]'）。styledcheckbox（）。在（'hello world
'之后）
);

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

return$（this.parent（'.styled复选框'）[0]

没有将div作为用于链接的对象返回？
原因是返回每个
中的任何内容都不会覆盖返回的对象。。。每个
的返回总是集合本身

您可以返回此的结果。映射

应能正常工作，因为

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];
    });

返回这个.map（函数（）{
var$this=$（this）；
var checked=$this.attr（'checked'）| |'；
$this.wrap（“”）；
返回$（this.parent（'.styled复选框'）[0]；
});

---

活生生的例子：（hello world在新添加的

div

之外）

每次返回的都是集合本身

-啊，对了！这就是解释。如果我理解你的方法是正确的，那么

this.map

中的

this

就是整个集合，因此集合中的每个项目都会被映射，因此每个项目都会作为映射元素（父元素）返回。非常感谢：）您是否知道为什么map函数中的

$this.attr（'checked'）

会返回undefined，即使复选框中有

checked=“checked”

，但当我验证并将map的返回设置为

this

时，它会再次识别它们。map函数是否有什么东西打破了

$（this）

或

$（this.attr（）

可以使用的方式？@kontur-hmm。。似乎对我有用（-请参见其中一个复选框被选中，并且样式

被选中

被分配到右侧的

样式复选框

div）。您应该使用

$（this）。prop（'checked'）

但请注意返回一个布尔值。@kontur-仅在上面展开一位

attr（'checked'）

将返回复选框的初始状态，首选使用

prop（/code>），因为如果选中当前状态，它将返回true！我猜你在代码中设置了checked状态，但是（正确地）没有为
attr
call.hm定义，在你的小提琴上试过，它确实起作用了。我试图找出我与您的代码的偏差，这应该会对它有所帮助；）再次感谢您的解决方案。