Add function to set of DOM elements using jQuery?

Question

My journey being at least on above basic level in front end is still on and I stumbled upon quite a big problem recently.

I can select DOM element, like

var element=document.getElementById("elementid")

and then add some function to it, like this

function testFunction() {
    alert(this.getAttribute('data-self'));
}
element.customFunction=testFunction;

But is there by chance any way of doing this using jQuery?

Tried with attr(), prop(), data() and without any luck on that matter. data() was a close one though, because it allows me to execute function using $('#my-element-id').data('customFunction')(); for example, but still doesn't solve my problem, as this new property of that selected buttons is not accessible any other way.

To sum up: What is the simplest way to add generic function (like in an example) to collection of DOM elements in a way that it's accessible like any other property?

See here http://stackoverflow.com/questions/4709822/add-jquery-function-to-specific-elements — jossiwolf, Feb 02 '16 at 22:13
It is not considered a good practice to add functions directly to DOM elements. Maybe you just want to add a jQuery plugin method so you can use jQuery to execute some custom function on one or more DOM elements? — jfriend00, Feb 02 '16 at 22:13
@jfriend00 but isnt it done in plug in dev? though I agree with your comment — pratikpawar, Feb 02 '16 at 22:17
@jfriend00 You answered it :). one quick question how is jquery plug in code works differently than function on dom.? — pratikpawar, Feb 02 '16 at 22:25
@pratikwebdev - jQuery plugin methods add methods to a jQuery wrapper object. Nothing is added to a DOM element itself. — jfriend00, Feb 02 '16 at 22:28
@jfriend00 Thank you for your reply. I will research further in that direction. :) — pratikpawar, Feb 02 '16 at 22:37

score 2 · Accepted Answer · answered Feb 02 '16 at 22:17

Adding a function directly to a DOM element is not considered a good practice for a variety of reasons.

I'd suggest a jQuery plugin method which is pretty easy:

jQuery.fn.myMethod = function() {
    // iterate all items in the jQuery collection and apply any logic you want
    return this.each(function() {
        // `this` will be the DOM element so you can carry out your operation here
        // for example, to flip a background color
        if (this.tagName === "INPUT") {
            this.style.backgroundColor = "red";
        } else {
            this.style.backgroundColor = "blue";
        } 
    });
}

// usage of jQuery plugin method:
$("#elementid").myMethod();
$(".boxes, .ovals, .containers").myMethod();

You can also pass arguments to your jQuery plugin method and use those arguments in the implementation of your custom method.

I guess this will somehow solve my problem. I'll wrap some handler as in this example and then call appropriate functions inside it, depending on data passed. I know it's not good practice to add directly to DOM, but it will be internal solution for very specific task. I already have written simple webserver and aggreed on data interface, now all I have left is frontend, which appears to me as hell in comparison to backend ;-) — ilmash, Feb 02 '16 at 22:22
Even more, I can abuse your method and do `$(selector).each(function() { this.customFunction=testFunction; });` which works, compared to my other tries and fails in that matter. I will keep in mind that it's bad practice and I promise not to spread it ;-) — ilmash, Feb 02 '16 at 22:35

score 0 · Answer 2 · answered Feb 02 '16 at 22:12

0

It's pretty similar. jQuery just returns an object so you can add functions to it.

var myElement = $('#elementid');
function testFunction() {
    alert($(this).attr('data-self'));
}
myElement.customFunction=testFunction;

myElement.customFunction();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="elementid" data-self="some value"></div>

answered Feb 02 '16 at 22:12

Rupert

1,629
11
23

This, sir, is basically the same thing I posted. I know I can select element this way, but it still requires some looping around to get desired effect. Hard to switch from static typed languages to JS, my my... – ilmash Feb 02 '16 at 22:20
Pretty sure this answers the question: "what is the simplest way to add generic function" and "is there by chance any way of doing this using jQuery" – Rupert Feb 02 '16 at 22:27

Add function to set of DOM elements using jQuery?

2 Answers2