Member Avatar for gunnarflax

If I would have a simple function like this:

jQuery.fn.example = function(){
   this.remove();
}

and call it with an empty selector:

$().example();

What element would then this be pointing to? Or is there a way to make a function able to be executed through both $.example(), without a selector, and with $(something).example()? If so, how can I find out which way the function has been executed so I can have different actions depending way of execution?

  • 2 Contributors
  • 5 Replies
  • 328 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by lambing

Dani AI

Generated

raised the right question and was on the right track — but to be precise: calling a method defined on $.fn with an empty selection does not auto-select document or window. An empty call simply yields an empty jQuery collection (an object with length === 0), and inside a $.fn method this is that collection. Most jQuery operations on an empty collection are no-ops (so remove() will do nothing).

A robust pattern to support both styles — a static utility ($.something) and an instance method ($(...).something) — is to factor the real work into a shared internal function, expose a static wrapper, and have the instance wrapper delegate to the static one when this.length === 0. The instance wrapper should return this to preserve chainability. This avoids brittle checks like instanceof (which can fail when multiple jQuery copies exist) and avoids trying to infer caller intent from this inside a static call.

Example pattern:

(function($){
  function core(elems, opts){
    if (elems && elems.length) {
      elems.each(function(){ /* element-level work */ });
    } else {
      // global/static behavior
    }
  }

  $.myPlugin = function(opts){ core(null, opts); };

  $.fn.myPlugin = function(opts){
    if (this.length === 0) {
      return $.myPlugin(opts);   // fallback when no elements selected
    }
    core(this, opts);
    return this;                // keep chainability
  };
})(jQuery);

Notes: prefer an explicit static API when the operation is not element-specific; avoid hiding side effects behind an empty selector; and keep instance methods tolerant of an empty collection by returning this or falling back to a documented static behavior.

Recommended Answers

All 5 Replies

Member Avatar for lambing

Basically, "this" refers to the selected element you have chosen to remove. Let's say, if you have called the .example() function like ( $("a").example(); ), "this" will refer to all link elements in your page. So basically, I think you don't have to call the $.example() function if you are not pertaining to any particular element.

Member Avatar for gunnarflax

What I meant was what would happen if a script dependent of a selector would be called without a selector used, what would then be automatically selected? The jQuery object or the document object perhaps? Do you understand my question?

Member Avatar for lambing

Yeah, I do understand your question. That's a good question, but I never encountered that kind of situation yet so basically, I don't have any idea about it.

Member Avatar for gunnarflax

Ok :) thanks anyway, if you ever find out, let me know will you?

Member Avatar for lambing

OK, I will.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.