Question: I'm trying to get the value of the input field with class `keyHash` when I click on the link with class `loadKey`. However, all I keep getting is `undefined`?

How is this done? Shouldn't this have worked?

[Fiddle](http://jsfiddle.net/v25kt10r/2/)

```
<div class="accounts hash">
    <input type="text" class="input-tiny keyHash">
    <i class="icon-plus loadKey">Click</i>
</div>

$('.loadKey').live('click', function() {

    alert($(this).closest('.keyHash').val());

});

```

Answer: 
As per [`.closest()` docs](http://api.jquery.com/closest/),for each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its **ancestors** in the DOM tree but here **input with class input-tiny and keyHash** is not the **ancestor** but its **sibling** then in that case try below answers.

Try using [`.siblings()`](http://api.jquery.com/siblings/) as shown :

```
$('.loadKey').click(function() {
    alert($(this).siblings('.input-tiny.keyHash').val());
});

```

[**DEMO**](http://jsfiddle.net/v25kt10r/4/)

As per your html structure `.siblings()` shown above will work just fine but if you have other elements with **class input-tiny and keyHash** which are siblings of `.loadKey` then try `:last` selector :

```
$('.loadKey').click(function() {
   alert( $(this).siblings('.input-tiny.keyHash:last').val() );
});

```

[**DEMO**](http://jsfiddle.net/v25kt10r/10/)

**OR**

Use [`.prev()`](http://api.jquery.com/prev/) as shown :

```
$('.loadKey').click(function() {
    alert($(this).prev('.keyHash').val());
});

```

[**DEMO**](http://jsfiddle.net/v25kt10r/6/)

**OR** 

Use [`.prevAll()`](http://api.jquery.com/prevAll/) with `:first` selector as shown :

```
$('.loadKey').click(function() {
   alert( $(this).prevAll('input:text[class="input-tiny keyHash"]:first').val() );
});

```

[**DEMO**](http://jsfiddle.net/v25kt10r/11/)

**OR**

Use [`.parent()`](http://api.jquery.com/parent/) as shown :

```
$('.loadKey').click(function() {
   alert( $(this).parent().children('input:text[class="input-tiny keyHash"]').val())
});

```

[**DEMO**](http://jsfiddle.net/v25kt10r/13/)

Don't use `.live()` its `deprecated since jquery version 1.7`(refer [here](http://api.jquery.com/live/)) instead use `.on()` as shown :

```
$(document).on('click','.loadKey',function() {
    alert($(this).prev('.keyHash').val());
});

```

Note :- Above shown `.on()`(**event delegation**) example is only be used when you are adding html dynamically inside DOM with jquery.
Why don't you try [FIDDLE](http://jsfiddle.net/c4qr6te1/1/)

```
 $('.loadKey').on('click', function () {

      alert($(this).parent().find('.keyHash').val());

});

```