How do I pass the jQuery selection object into a function being called by the selection?

Question

New to jQuery and I don't know how else to say it.

When the function below is within the jquery selection, it works fine. When I try to break out the function I'm not sure what object/variable needs to be passed into the function in order to make the function work.

//function included in selection works great
$('#id1 tbody tr').find('td:eq(2)').text(
function(i,t){
    return Math.round((parseInt(t,10) / 60)*100)/100;
});

//function broken out returns NaN in HTML
$('#id2 tbody tr').find('td:eq(2)').text(minutesToHours());

function minutesToHours(i,t){
    return Math.round((parseInt(t,10) / 60)*100)/100;
}

It's the same function but returns 'NaN' in the HTML. I know I need to pass the object into the function minutesToHours(), but nothing I've tried works-- this or $(this). minutesToHours('whatGoes','here')

JSFiddle

I'm assuming this has something to do with context but I can't figure it out.

Example HTML

<table id="id1">
    <tbody>
        <tr>
            <td>John</td>
            <td>2</td>
            <td>800</td>
            <td>4</td>
        </tr>
        <tr>
            <td>Sally</td>
            <td>5</td>
            <td>610</td>
            <td>9</td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>7</td>
            <td>249</td>
            <td>3</td>
        </tr>
    </tbody>
</table>

<table id="id2" style="margin-top:1em;">
    <tbody>
        <tr>
            <td>John</td>
            <td>2</td>
            <td>800</td>
            <td>4</td>
        </tr>
        <tr>
            <td>Sally</td>
            <td>5</td>
            <td>610</td>
            <td>9</td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>7</td>
            <td>249</td>
            <td>3</td>
        </tr>
    </tbody>
</table>

Result

Included function
    John    2   13.33   4
    Sally   5   10.17   9
    Bob     7   4.15    3

Broken out function
    John    2   NaN 4
    Sally   5   NaN 9
    Bob     7   NaN 3

Thanks for your help!

You have to reference the function `$('#id2 tbody tr').find('td:eq(2)').text(minutesToHours);` — adeneo, Oct 13 '16 at 00:30
@adeneo Thanks! Why is that? If I don't pass anything does it assume the context of the selection, like I'm passing `this`? — Barrett Kuethen, Oct 13 '16 at 00:34
Yes, that about sums it up. When you add the parentheses you call the function instead. — adeneo, Oct 13 '16 at 00:48

Wesley Smith · Accepted Answer · 2016-10-13T01:31:25.707

To further explain Adeno's answer in the comments:

From the docs:

.text( function )

function

Type: Function( Integer index, String text ) => String A function returning the text content to set. Receives the index position of the element in the set and the old text value as arguments.

This means that when you call the below, t is filled with the old text value:

$('#id1 tbody tr').find('td:eq(2)').text( function(i,t){
    return Math.round((parseInt(t,10) / 60)*100)/100;
});

However, when you use minutesToHours() in the below, you are actually calling minutesToHours() with no parameters and passing the returned value into .text() Since you didnt pass any variables to the function,t is undefined and the function produces NaN:

$('#id2 tbody tr').find('td:eq(2)').text(minutesToHours());

function minutesToHours(i,t){
    return Math.round((parseInt(t,10) / 60)*100)/100;
}

And a different signature for .text() is used:

.text( text )

text

Type: String or Number or Boolean The text to set as the content of each matched element. When Number or Boolean is supplied, it will be converted to a String representation.

With Adeno's suggestion, you drop the () from minutesToHours() like the below. Now you are passing a reference to the minutesToHours function into .text() not calling the function . When, .text() sees the parameter is a function, it will call the function in that context, passing in the two values (index, text ) and all is right with the world:

$('#id2 tbody tr').find('td:eq(2)').text(minutesToHours);

function minutesToHours(i,t){
    return Math.round((parseInt(t,10) / 60)*100)/100;
}

That makes sense to me now. Thanks so much! – Barrett Kuethen Oct 14 '16 at 23:07 — Barrett Kuethen, Oct 14 '16 at 23:07

How do I pass the jQuery selection object into a function being called by the selection?

1 Answers1