创建我自己的jquery函数，但它只适用于一个元素？

我定义了自己的函数，如下所示：

jQuery.fn.createSelector = function(){
    var element = $(this[0]);
    // hide original selector
    $(element).hide();
    // create new selector
    $(element).after('<table class="selectorReplacer"><tr><td class="td01"></td><td class="td02"><div></div></td><td class="td03"></td></tr></table>');
};

$(".createSelector").createSelector();

.after('<div id="div1">')
.after('<div id="div2">');

<div class="createSelector"></div>
<div id="div2">
<div id="div1">

jQuery.fn.createSelector = function(){
    return this.hide().after('<table class="selectorReplacer"><tr><td class="td01"></td><td class="td02"><div></div></td><td class="td03"></td></tr></table>');
};

在我的HTML中，我有许多

div，但该函数只应用于其中一个（代码中的第一个）

我应该如何重写我的函数以将其应用于所有元素

编辑：还有一个问题

我需要附加更多的元素，比如说：

jQuery.fn.createSelector = function(){
    var element = $(this[0]);
    // hide original selector
    $(element).hide();
    // create new selector
    $(element).after('<table class="selectorReplacer"><tr><td class="td01"></td><td class="td02"><div></div></td><td class="td03"></td></tr></table>');
};

$(".createSelector").createSelector();

.after('<div id="div1">')
.after('<div id="div2">');

<div class="createSelector"></div>
<div id="div2">
<div id="div1">

jQuery.fn.createSelector = function(){
    return this.hide().after('<table class="selectorReplacer"><tr><td class="td01"></td><td class="td02"><div></div></td><td class="td03"></td></tr></table>');
};

.after（“”）
.在（''）之后；

问题是结果是相反的，因此插入后，HTML如下所示：

jQuery.fn.createSelector = function(){
    var element = $(this[0]);
    // hide original selector
    $(element).hide();
    // create new selector
    $(element).after('<table class="selectorReplacer"><tr><td class="td01"></td><td class="td02"><div></div></td><td class="td03"></td></tr></table>');
};

$(".createSelector").createSelector();

.after('<div id="div1">')
.after('<div id="div2">');

<div class="createSelector"></div>
<div id="div2">
<div id="div1">

jQuery.fn.createSelector = function(){
    return this.hide().after('<table class="selectorReplacer"><tr><td class="td01"></td><td class="td02"><div></div></td><td class="td03"></td></tr></table>');
};

如何使它们按照我在代码中写入它们的顺序插入？

jQuery.fn.createSelector=function（）{
jQuery.fn.createSelector = function(){
    return this.each(function() {
        var element = $(this);
        // hide original selector
        element.hide();
        // create new selector
        element.after('<table class="selectorReplacer"><tr><td class="td01"></td><td class="td02"><div></div></td><td class="td03"></td></tr></table>');
    });
};

返回此值。每个（函数（）{
var元素=$（此）；
//隐藏原始选择器
元素。隐藏（）；
//创建新选择器
元素。在（“”）之后；
});
};

当然，您也可以从中删除[0]和包装器：

var元素=this
尝试在（“”）之后使用
this.hide（）
而不是执行有效解析为第一个匹配元素的
$（此[0]）

编辑：使用链接，因为它是JQuery的优势之一。
在插件
中，此
已经是JQuery对象，因此不需要再次包装它，如下所示：

jQuery.fn.createSelector = function(){
    var element = $(this[0]);
    // hide original selector
    $(element).hide();
    // create new selector
    $(element).after('<table class="selectorReplacer"><tr><td class="td01"></td><td class="td02"><div></div></td><td class="td03"></td></tr></table>');
};

$(".createSelector").createSelector();

.after('<div id="div1">')
.after('<div id="div2">');

<div class="createSelector"></div>
<div id="div2">
<div id="div1">

jQuery.fn.createSelector = function(){
    return this.hide().after('<table class="selectorReplacer"><tr><td class="td01"></td><td class="td02"><div></div></td><td class="td03"></td></tr></table>');
};

为什么?？当您从jQuery对象（
this
）执行
this[0]
时，获取第一个DOM元素并将其包装到一个新的jQuery对象中。但是…你不需要，你需要所有匹配的元素，所以跳过这一步。
将插件的第一行更改为：

var element = this;

由于您的函数是jQuery插件扩展，因此当调用它时，
此
将已经是jQuery包装的元素或元素列表（即
此==$（“.createSelector”）
）。因此，您不需要将其包装在
$（）
选择器中。这就是为什么当您执行
此[0]
时，它只选择jQuery元素列表中的第一个元素（即
$（“.createSelector”）[0]
。
执行
$（此操作）。每个
都是不必要的，因为jQuery将对所有匹配的元素应用
隐藏
和
之后
，但是您的代码中有一个语法错误。最后忘记关闭
.each（）
函数。请在您的帖子中修复它，我将接受您的解决方案。谢谢@RiMMER-请不要使用这种方法，这里有很多无缘无故的浪费周期，请参阅上面的答案，以了解如何大大缩小这种浪费。包装
这个
是不必要的，因为它在插件上下文中已经是jQuery对象（不是DOM元素或原始数组）。上帝一样！非常感谢，不过我还有一个问题。我将编辑我的第一篇文章，希望你能再次帮助我！：）@RiMMER-将来我会把这个问题作为一个不同的问题来问，因为它会在以后更改它，从而抛开所有的答案/问题。对于您的问题，您可能需要将它们作为一个html字符串放入一个
.after（）
，或者在
.after（）
调用之间放入一个
.next（）
（每个添加的元素）。after（）
调用使您遍历到刚添加的元素，然后在该元素之后添加内容，例如：
.after（“”）或
.after（“”）.next（）.after（“”）