Question

I have the following html code in my application:

<tr style="cursor:pointer;">
    <td>100101</td>
    <td>Monkey</td>
    <td>Nuts<td>
    <td>Cow</td>
    <td>Soup</td>
    <td>Chicken</td>
    <td>Leg</td>
    <td class="non-clicky">
        <p>Click</p>
    </td>
</tr>

What I need to do is get the value of the first td when I click on the class non-clicky.
So I have the code:

alert($('.non-clicky:first').parent().children('td:first').val());

This code results in the value of “” — empty string being returned and not the result 100101.

So, instead i tried the code:

alert($('.non-clicky:first').siblings(':first').val());

Again this resulted in the value being empty string, why is it .val() is returning an empty string instead of the correct result?

I tried the code below and this gives me the correct answer, but I am curious as to why val does not. What is the difference between val and text?

alert($('.non-clicky:first').siblings(':first').text());
// and 
alert($('.non-clicky:first').parent().children('td:first').text());

Note:

The code above makes use of $('.non-clicky:first') this was only for my testing purposes in the code it will be within a jquery click event.

Answer 1

Use .text(), .val() is for getting the value of an input element.