0

I'm trying to make a function callable on a jQuery selector.

Here is what I'm doing on my page:

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>first</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script type="text/javascript" src="../myplugin.js"></script>
</head>
<body>
  <div class="foo"></div>

  <script type="text/javascript">
    // my custom function 
    $(".foo").addGadget({ "src":"gadgets/menu.html", "param":{"filter":"office"}},
        function (error, response) {
          console.log("hello!!!");
        });
  </script>
</body>
</html>

So I want to be able to call my custom function addGadget() on $('foo'). This works all right:

(function (window, jquery, undefined) {
  var that = {};

  that.addGadget = $.fn.addGadget = function (options, callback) {
    console.log("I'd like to access my element here");
    console.log(this);
    console.log($(this));
  };

  return window.myPlugin = that;
}(window, $));

So I can call both 

 myPlugin.addGadget();
 $('.foo').addGadget();

Problem is, I cannot access foo inside my method.

Question:
What do I need to change to be able to access foo inside the my addGadget method?

Thanks!

Adil Shaikh
  • 44,509
  • 17
  • 89
  • 111
frequent
  • 27,643
  • 59
  • 181
  • 333
  • possible duplicate of [Getting initial selector inside jquery plugin](http://stackoverflow.com/questions/5477394/getting-initial-selector-inside-jquery-plugin) –  May 20 '13 at 15:01
  • You are passing in `$` as `jquery`, then using `$` inside the function? Also, what does `console.log(this)` output? – Dogbert May 20 '13 at 15:02
  • @Dogbert: Thanks for `$/jquery`. `console.log` kept outputting `document` - that's why I posted... just checked again, now it works. Not sure why it did not before though. – frequent May 20 '13 at 15:13

3 Answers3

2

You could try using

that.addGadget = $.fn.addGadget = function (options, callback) {
    console.log($(this).selector);
};
Björn Roberg
  • 2,275
  • 2
  • 15
  • 15
2

There's the .selector property that people have used, but I'm not certain it was ever officially supported.

Either way, it is now officially deprecated.

From the .selector docs:

The .selector property was deprecated in jQuery 1.7 and is only maintained in jQuery 1.9 to the extent needed for supporting .live() in the jQuery Migrate plugin. It may be removed without notice in a future version. The property was never a reliable indicator of the selector that could be used to obtain the set of elements currently contained in the jQuery set where it was a property, since subsequent traversal methods may have changed the set. Plugins that need to use a selector should have the caller pass in the selector as part of the plugin's arguments during initialization.

0

As mentioned in the comment by @Dogbert

console.log(this);

should return the selector the function was called on. It does...

frequent
  • 27,643
  • 59
  • 181
  • 333
  • No it doesn't. The value of `this` in your plugin will be the jQuery object that contains the matched elements if any. Are you now saying that you *don't* want the selector? –  May 20 '13 at 15:58
  • What are you confused about? Maybe we have some terms mixed up. Just to be sure, and my apologies if you already know this, but a selector is a string of text that describes the location of an element (or elements) in the DOM. So the selector in your example is the string `".foo"`. The result of having run the selector is sometimes called your "selection". This would be the matched DOM elements, if any. So if what you needed was the jQuery object that holds the DOM elements, then yes, you would just use `this` in your plugin, since that'll point to the jQuery object. –  May 21 '13 at 12:08