Can I add method to a custom class of an HTMLElement

Question

My question is similar to this:

How to add my own methods to HTMLElement object?

Since the answer is 'NO', I'm wondering if I can add a method to the class instead of the HTMLElement itself, like:

<SELECT class="sel_region">

<script>
$(function(){

  $('.sel_region').doSomething();

});
</script>

If possible, how to achieve it?

This is how I invoke it: $('.sel_region').doSomething(); Just don't know how to define it. — abacusit, Jun 23 '14 at 14:25

score 0 · Answer 1 · answered Jun 23 '14 at 14:24

$('.sel_region') isn't a class. Assuming you're using jQuery, it's a collection of all the elements on the page that have the sel_region class. If you would like to be able to add a method to jQuery, this is the link for you:

http://api.jquery.com/jquery.fn.extend/

You could do something like:

jQuery.fn.extend({
  doSomething: function() {
    return this.each(function() {
      // Do something to the matching elements, which will be `this`
   });
});

$('.one-class').doSomething();
$('.another-class').doSomething();

@abacusit You're welcome. If you're satisfied with this answer click the tick next to it to accept it. — doctororange, Jun 23 '14 at 22:00

score 0 · Answer 2 · answered Jun 23 '14 at 14:28

You, of course, could do this. You should loop all existing htmlElement instances with current class

$(".sel_region").each(function(index, element) {
  element.prototype.yourFunction = function() { console.log("exists!"); };
});

You should call this loop on Dom load

Can I add method to a custom class of an HTMLElement

2 Answers2