I've got this snippet of code that I'm working with:
$("td").on("click", function(){
var result = $(this).closest('table').siblings('form').find('input[name="inputname"]').attr('value');
alert(result);
});td {
cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>click</td>
<tr>
</tbody>
</table>
<form>
<input name = 'inputname' value = "10">
</form>
<form>
<input name = 'inputname' value = "12">
</form>Currently, when click is clicked on, it correctly alerts 10. However, I have a slight concern about using .siblings('form') because the second form is also within the siblings scope of the table. I only want to select the form that is directly under the table, and not the second form.
The output is correct, but I am looking for an alternative to using .siblings(form) in this situation. Is there another way to accomplish this in jQuery?
In other words, how can I rewrite this in jQuery?
$(this).closest('table')./* next form */.find('input[name="inputname"]').attr('value');