CODEWITHSUNDEEP
javascriptjqueryjquery-plugins
Brett
Brett

Reputation: 20049

Getting the element that the plugin was binded to in jQuery?

I've been making my first jQuery plugin and I need to add some CSS in the head via a styles tag as doing inline css on the element which gets injected by the script has some weird bugs in IE8 - 10.

But to add the styles in the head I need to target the actual element that the user binded the plugin to.

For example:

$('input').myPlugin(); // I need to get the text "input"
$('#form .foo').myPlugin(); // I need to get the text "#form .foo"

Is it possible to get this data within the plugin?

Upvotes: 1

Views: 86

Answers (3)

Downgoat
Downgoat

Reputation: 14361

$.myPlugin

The recommended way to solve your problem is using this and other methods described below. If you require the selector as a string, you can define the function as a child of jQuery ($) and have the function executed in a similar way to jQuery's &.ajax and $.extend. What this is doing is it is making it a child of jQuery, and a child of $.fn so it can still be 'classified' as a regular jQuery plugin, or a prototype of jQuery. When you old set your plugin the $.fn, it is set to jQuery's prototype, making it so you have to run the jQuery function. Here we are doing that, but because functions are also objects, we can set that function to $.myPlugin making it still part of jQuery, but prevents the user from entering the selector twice. Since this.selector s deprecated (and it'll probably be removed soon) it's better than running it through a function to generate a selector.

$.myPlugin = $.fn.myPlugin = function (selector) {
    console.log(selector);
}

$.myPlugin('#selector'); //Logs: '#selector

The $.fn is completely optional and is there just in case a user forgets to execute the function using $.myPlugin(selector) the function will still work when using $().myPlugin(selector)

Other alternative

If you don't require the string, I would recommend using jQuery's .filter() or similar functions (here) along with $(this).

$.fn.myPlugin = function () {
    var $this = this;
    var filteredElements = $this.children('a');//

    console.log(filteredElements);
} 
$('#form .class').myPlugin();
//Logs: children that are <a> of #form .class

Upvotes: 1

guest271314
guest271314

Reputation: 1

Try

$.fn.myPlugin = function(sel) {
  console.log(sel, $(this));
};
var selectors = ["input", "#form .foo"];
$(selectors[0]).myPlugin(selectors[0]); // I need to get the text "input"
$(selectors[1]).myPlugin(selectors[1]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>

<input type="text" />
<form id="form">
  <select class="foo" name="foo">
    <option value="abc">abc</option>
  </select>
</form>

Upvotes: 0

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382092

That string is the selector property of the object:

$.fn.myPlugin = function(){
    console.log(this.selector);
}
$('#form .foo').myPlugin(); // logs '#form .foo'

But using it looks like a bad practice (and it's also deprecated, as pointed by charlietfl, for good reasons). You shouldn't need it. To style the elements you can directly do

$.fn.myPlugin = function(){
    this.css('color', 'red');
}

Upvotes: 1

Related Questions