Question

I have the following (repeating) html:

<tr>
    <td>Some text</td>
    <td><a href="#">Click me<a/></td>
    <td><form><input type="hidden" value="4"/></form></td>
</tr>

Using jQuery on the click event of the link I want to retrieve the value of the input element. I have tried all kinds of parents(), children(), nextAll(), prev() combinations but I can not get the value of the input element.

Here is a link to my testing functions. jsFiddle Link

Additionally how would i retrieve the text of the first td element?

Thanks a lot for helping me achieve this.
Michael

Answer 1

You can use parent to get to the td from the a, then next to get to the following td, and then find to get to the input element:

$("a").click(function() {
    var value = $(this).parent().next().find("input").val();
});

Here’s an updated fiddle.

To get the text from the first td you can take pretty much the same approach, but use prev instead of next.

Also, seeing as you have several repetitions of the HTML snippet, it’s probably going to be more efficient to bind the click event handler higher up the DOM tree (maybe you already are, you haven’t posted any JS so I don’t know):

$("table").on("click", "a", function() {
    //Do stuff
});