creating my own jquery function, but it works for only one element?

I have defined my own function, like this:

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

Then I have applied it, like this:

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

In my HTML, i have MANY <div class="createSelector"> divs, but the function is applied only to one (the first one in the code) of them.

How should I rewrite my function to have it applied to all the elements?

EDIT: One more problem.

I need to append more elements, let's say like this:

.after('<div id="div1">')
.after('<div id="div2">');
开发者_开发知识库

The problem is the result is reversed, so after insert, the HTML looks like this:

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

How do I make them insert in the order I write them in the code?

---

Inside a plugin this is already a jQuery object, so you need not wrap it again, like this:

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

Note that by returning the result (which is still the same set in this case), it allows you to chain other jQuery functions on the end, for example:

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

Why? When you do this[0] you're saying from that jQuery object (this), take the very first DOM element and wrap that in a new jQuery object. But...you don't want that, you want all matched elements, so just skip this step.

---

surely you drop the [0] from this and the wrapper too:

var element = this;

---

Try using this.hide().after("<your html>"); instead of doing $(this[0]) which is effectively resolving to the first matched element.

Edit: to use chaining as it is one of JQuery's strengths.

---

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

---

Change the first line of your plugin to:

var element = this;

Since your function is a jQuery plugin extension, when it is called this will already be a jQuery wrapped element or list of elements (i.e. this == $(".createSelector")). Therefore you don't need to wrap it in the $() selector. That's why when you do this[0] it's selecting only the first element in the jQuery element list (i.e. $(".createSelector")[0]).