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

为什么？当您从{jQuery对象（this[0]）执行this时，请使用第一个 DOM元素，在新的jQuery对象中包装。但是......你不希望这样，你想要所有匹配的元素，所以只需跳过这一步。

Answer 2

你肯定会从这个和包装器中删除[0]：

var element = this;

Answer 3

尝试使用this.hide().after("<your html>");而不是$(this[0])，这有效地解析了第一个匹配的元素。

编辑：使用链接，因为它是JQuery的优势之一。

Answer 4

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

Answer 5

将插件的第一行更改为：

var element = this;

由于你的函数是一个jQuery插件扩展，当它被称为this时，它已经是一个jQuery包装元素或元素列表（即this == $(".createSelector")）。因此，您无需将其包装在$()选择器中。这就是为什么当你执行this[0]时它只选择jQuery元素列表中的第一个元素（即$(".createSelector")[0]）。

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

5 个答案: