jQuery select my input tag above

Question

When a user click on my icon-calendar inside the i tag I would like to reference the input just above.

<div class="input-control text">
    <input type="text" data-bind="text: fromDate" />
    <i data-bind="datepicker: fromDate" class="icon-calendar btn"></i>
</div>

So how to use jQuery to select the input above my i tag.

Something like:

$(element).closest('input')

Where element is my i tag clicked.

Thanks.

Answer 1

closest() will traversing up through its ancestors in the DOM tree not the siblings of your element, you can use siblings() or prev():

$('.btn').siblings('input').data('bind')
$('.btn').prev().data('bind')

Fiddle

Answer 2

http://api.jquery.com/prev/

$(element).prev("input").first();