CODEWITHSUNDEEP
javascriptjqueryperformanceprototype
ononononon
ononononon

Reputation: 1083

jQuery - prototype only elements of class

Hi guys. I want to know if it's possible to prototype only elements of certain class, type, name etc..

For example:

$.fn.showRequiredError = function(){
    $(this).after('<p class="error">This field is required</p>');
});

This one works if I call $("#xxx").showRequiredError();

Now I wonder if it's possible to "extend" functionality of jquery only to elements of class .required

So for example it would look like this:

$(".required").fn.showRequiredError = function(){
    $(this).after('<p class="error">This field is required</p>');
});

And I would be able to call ONLY $(".required").showRequiredError();.
If I call $(".somethingElse").showRequiredError(); it would do nothing.

Hope you understand.

P.S.: Can this approach have any performance impacts?

Upvotes: 1

Views: 87

Answers (3)

T.J. Crowder
T.J. Crowder

Reputation: 1074208

You can do that, although it seems a bit odd, normally it's the programmer using the plugin who decides what elements it will act on.

You'd do it by using filter:

$.fn.showRequiredError = function(){
    this.filter(".required").after('<p class="error">This field is required</p>');
    //  ^^^^^^^^^^^^^^^^^^^^--- the new bit

    // See "side note" below
    return this;
};

Now, the first thing the plugin does is filter the contents of the jQuery object it's called on so they only include .required elements.

It would have a very very small performance impact, nothing to worry about.

Example:

$.fn.showRequiredError = function(){
  this.filter(".required").after('<p class="error">This field is required</p>');
  //  ^^^^^^^^^^^^^^^^^^^^--- the new bit

  // See "side note" below
  return this;
}; 

$("div").showRequiredError();
.required {
  color: blue;
}
<div class="foo">This doesn't have 'required'</div>
<div class="foo required">This does have 'required'</div>
<div class="required">So does this</div>
<div>But not this</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Side note 1: Note that in the call to a jQuery plugin, this is a jQuery object, so writing $(this) is redudant (and a tiny bit of extra work at runtime).

Side note 2: Unless you have something else you have to return, by convention jQuery plugins should return this, for chaining.

Upvotes: 1

jfriend00
jfriend00

Reputation: 707258

All jQuery objects have all the methods so you can't restrict what can be called on any given jQuery object.

You can however, write code inside the method to decide whether to do anything or not. So, you could check if the elements in the jQuery object were the right type of elements and, if not, then do nothing.

Or, if you really don't operate on the DOM elements in your jQuery object because you already know what they are, then perhaps you want a static jQuery method like $.showRequiredError instead.

$.showRequiredError = function(){
    $(".required").after('<p class="error">This field is required</p>');
});

And, you would call it as $.showRquiredError().

Upvotes: 0

smnbbrv
smnbbrv

Reputation: 24541

I don't understand in this case usage of selector at all. Just add function to jQuery object prototype:

$.showRequiredError = function(){
    $(".required").after('<p class="error">This field is required</p>');
};

$.showRequiredError()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input class="required">
<input class="not-required">

Upvotes: 0

Related Questions