how to call a function with parameters that is assigned to a variable in JQuery .each()?

Question

How can I pass arguments to a function that is assigned to variable. For example:

var updateDiv = function() {
   var row = this;
   var values = "";
   $('input[type=text],textarea,input[type=radio]:checked,input[type=checkbox]:checked', this).each(function() {
       if ($(this).val()!="" && $(this).val()!=null) {
           if (values!="") values = values + ","+ $(this).val();
           else values +=  $(this).val();
         }
       });
      if (values!="") { 
       if(values.substring(0,1)==",") values = values.substring(1) +"<br>";
       else values = values +"<br>";
      } 
      $('.jist', row).append(values);
}

$('tr:has(input)').each(updateDiv);
$('tr:has(textarea)').each(updateDiv);

HTML:

<tr>
<td>ai</td><td> <input type="text" name="ai" id="ai"></td>
<td><input type="checkbox" name="ana" id="ana" value="N/A"></td>
<td><div class="jist"></div></td>
</tr>

I want to pass arguments to updateDiv -> updateDiv("mystring"); and I want to use "mystring" in the function this way - > $('.'+mystring, row).append(values);

Your question is about passing arguments to functions used in each(), and has nothing to do with assignments? — Bergi
– Bergi, Commented Jul 17, 2012 at 18:28
Yes, I want to pass arguments to the function "updateDiv" used in each(). if I do $('tr:has(input)').each(updateDiv("mystring")); and modify my function's last line to $('.'+mystring, row).append(values); it's throwing an error: TypeError: c is undefined — Sapphire
– Sapphire, Commented Jul 17, 2012 at 18:33
No, I meant that you might should edit your question's title — Bergi
– Bergi, Commented Jul 17, 2012 at 18:46
@Sapphire I strongly suggest you get some language basics first. You are passing a reference to a Function instance to the each() method, so that each() can call that function. The term for this is callback. The question is: What value do you want to pass to the referred function? Your function has an empty parameter list, and you are not using arguments in the function body. So whatever this function is passed, it does exactly the same. — PointedEars
– PointedEars, Commented Jul 17, 2012 at 18:54

iambriansreed · Accepted Answer · 2012-07-17 19:06:01Z

1

Simple and Clean

Not sure how I missed the obvious here.

jQuery

var updateDiv = function(divClass) {    
    ...
    $(divClass, row).append(values);
}

$('tr:has(input)').each(function(){ updateDiv('.hist'); });
$('tr:has(textarea)').each(function(){ updateDiv('.something-else'); });

.

Global Variable Method

You could assign global variables with the class name. By defining the variable before each .each() the updateDiv function uses a different class name.

jQuery

var updateDiv = function() {    
    ...
    $(window.divClass, row).append(values);
}

window.divClass = '.hist';
$('tr:has(input)').each(updateDiv);
window.divClass = '.something-else';
$('tr:has(textarea)').each(updateDiv);

.

HTML5 Data Method

You could assign values as data objects to the elements which are being called. I also cleaned up some of your selectors and jQuery redundancies.

Fiddle: http://jsfiddle.net/iambriansreed/KWCdn/

HTML

<table>
    <tr data-update=".hist">
        <td>AutoI</td>
        <td> <input type="text" name="autoIH_complaint" id="autoIH_complaint"></td>
        <td><input class="NA" type="checkbox" name="autoINA" id="autoINA" value="N/A"></td>
        <td><div class="hist"></div></td>
    </tr>
</table>

jQuery

var updateDiv = function() {

    var row = this, values = "";
    $('input:text,textarea,:radio:checked,:checkbox:checked', this).each(function() {
        if (this.value != "" && this.value != null) {
            if (values != "") values = values + "," + this.value;
            else values += this.value;
        }
    });
    if (values != "") {
        if (values.substring(0, 1) == ",") values = values.substring(1) + "<br>";
        else values = values + "<br>";
    }
    $(row.data('update'), row).append(values);
}

$('tr:has(input)').each(updateDiv);
$('tr:has(textarea)').each(updateDiv);

edited Jul 17, 2012 at 19:06

answered Jul 17, 2012 at 18:38

iambriansreed

22.3k6 gold badges66 silver badges81 bronze badges

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

4 Comments

Sapphire Over a year ago

Please look at the HTML code I added. that's the model I'm using.

iambriansreed Over a year ago

@Sapphire I see the update but no real big change in how it would be implemented. I updated my code here and the fiddle for clarity though.

Sapphire Over a year ago

It's a huge form so can I achieve this without making any changes to the HTML? Editing each row will take me 2 hrs.

iambriansreed Over a year ago

Done. Not sure how I missed this. Too much jQuerying too little JavaScripting I guess.

Jonathan Payne · Accepted Answer · 2012-07-17 18:38:32Z

0

We can pass the index into the function, much like jQuery's .each() method.

<div class="test">1</div>
<div class="test">2</div>

This will alert "0" and then "1" for the indexes.

var updateDiv = function( index )
{   
    alert( index );
}

$('.test').each(updateDiv);

If you pass in strings as parameters, .each(updateDiv("string1")) it is evaluates the function first.

answered Jul 17, 2012 at 18:38

Jonathan Payne

2,22313 silver badges11 bronze badges

Collectives™ on Stack Overflow

how to call a function with parameters that is assigned to a variable in JQuery .each()?

2 Answers 2

Simple and Clean

Global Variable Method

HTML5 Data Method

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Simple and Clean

Global Variable Method

HTML5 Data Method

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related