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

Question

我已经定义了自己的函数,如下所示:

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();

在我的HTML中,我有许多<div class="createSelector">div,但该函数仅应用于它们中的一个(代码中的第一个).

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

编辑:还有一个问题.

我需要添加更多元素,让我们这样说:

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

问题是结果是相反的,所以插入后,HTML看起来像这样:

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

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

Answer 1

插件内部this已经是一个jQuery对象,所以你不需要再次包装它,如下所示:

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函数,例如:

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

为什么？当你做this[0]你从jQuery对象(说this),采取的第一个 DOM元素和包装是在一个新的jQuery对象.但是......你不希望这样,你想要所有匹配的元素,所以只需跳过这一步.