Question

I’ve trying for a while to now to figure out why I can never get the “closest” function from jquery to work.

Say I have this code;

<form>
<input type='text' name='q'>
<a href='javascript:void(0);' id='search_items'>Search</a>
</form>

Why does the following always alert “undefined”?

$("#search_items").bind('click', function () {
    var q = $(this).closest("input[name=q]").val();
    alert(q);
});

Thanks in advance!
Cheers,
Ben

Answer 1

Your input element is a sibling, not an ancestor of #search_items. You want siblings() (or prev(), dependent on the flexibility required).

$("#search_items").bind('click', function () {
    var q = $(this).siblings("input[name='q']").val();
    alert(q);
});