Passing elements through Jquery functions

Question

I keep running up against this issue, which reflects my basic lack of understanding.

I want to collect all instances of a class, then be able to have a function which understands which element instance called it.

I created a Fiddle, http://jsfiddle.net/AKa4s/, which doesn't work, just to try to explain my question.

It's like this, I collect all the div elements & assign a function to it: $(".square").each(writeColorpanel);

Then in that function I need to call another function. The next function seems to have absolutely no idea who called. I need caller ID (joke).

The problem is that I end up running the same calculations for different divs, and repeating the function so that I can apply css to each of the divs based on the results.

You can't have multiple elements with the same id attribute value. — Šime Vidas
– Šime Vidas, Commented Aug 6, 2012 at 14:06
Where is the .doChange() method coming from? Is it a plug-in? — Šime Vidas
– Šime Vidas, Commented Aug 6, 2012 at 14:08
My guess is that the "current element" is referenced by the this value within the onColorChange function. — Šime Vidas
– Šime Vidas, Commented Aug 6, 2012 at 14:10
It was just an example, but yes I am using values returned from Farbtastic in this case. My example may be poor... I don't know how to express the question very well. How to run calculations based on values retrieved from some divs, then apply values to all those divs. A basic structure question. I cannot find any syntax such as $(this) or $(elem) to work. — Jen
– Jen, Commented Aug 6, 2012 at 14:11
Check what this refers to inside the onColorChange function. It could be the reference you're looking for... — Šime Vidas
– Šime Vidas, Commented Aug 6, 2012 at 14:15

VVV · Accepted Answer · 2012-08-06 15:52:10Z

1

You're doing it way too complicated.

jQuery(document).ready(function($) {


// run the function for every div
$(".square").each(function(i) {

    $('.output').eq(i).val(multiplyColor($(this).val()));
    //Show the output to the 1st/2nd/3rd output (that's where eq comes from
    //As for the value, I call a function and pass a parameter to do the calculations

    //Now if you want to call another function you need to pass the element itself as a parameter;
    alertMyId($(this));
});

function alertMyId(elem) {
   //elem has now all the same properties as if you were in the "each" function      
    alert(elem.attr('id'));

}

//Ideally if you just want to calculate something, you should just pass along the value you want to calculate
function multiplyColor(value) {
  var color = 3;
  return  value * color;
}

}); Check this fiddle

Also you can't have different html elements with the same ID. Use classes instead.

edited Aug 6, 2012 at 15:52

answered Aug 6, 2012 at 14:13

VVV

7,6033 gold badges37 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Nope Over a year ago

Added code, in case of dead-link or jsFiddle being in maintenance preventing other users to see the code in the future.

Jen Over a year ago

The Ids were a typo, sorry. My question is, what if you have to call another function? In the first function you can access the elem, because you are attaching the function to it. But now what if each 'square' has a value, & you need to call another function to run calculation on the value, and then place those values back into the divs that you began with?

VVV Over a year ago

@JenniferMichelle You simply need to pass the element (or juste the ID) as a parameter. I will update my answer with an example.

adeneo · Accepted Answer · 2012-08-06 14:10:21Z

0

Is it something like this :

$(function() {
    $(".square").each(function(i,e) {
        writeColorpanel(i,e);
    });

    function writeColorpanel (i, elem) {
       color=3;        
       onColorChange(elem, color);
    }

    function onColorChange(elem, color) {
       var m = elem.value
       var q = m*color;
       $('#output_'+elem.id).val(q);
    }
});

FIDDLE

answered Aug 6, 2012 at 14:10

adeneo

319k29 gold badges410 silver badges392 bronze badges

4 Comments

Šime Vidas Over a year ago

Please explain what you changed.

VVV Over a year ago

He passed the element to the onColorChange function so that is your "caller id" :)

Jen Over a year ago

I understand. I think I have tried this before and it didn't work, but your example obviously does. Thanks, I'll try that in the long icky noob code I have. :)

adeneo Over a year ago

This works fine, it's the basic way of passing something on to a function in it's simplest form.

Collectives™ on Stack Overflow

Passing elements through Jquery functions

2 Answers 2

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related