How to select value of adjacent hidden input with Jquery?

Question

When a user clicks on the img at the end of the following "li", I want to get the value of the hidden input two elements previous.

<ul id="theLists">
    <li>
    <input class="checkbox" type="checkbox" name="row"/>
    <input class="contentId" type="hidden" value="64" name="id"/>
    <div id="64" class="editable">Peanuts for me</div>
    <img src="/img/delete.gif" alt="delete"/>
    </li>
</ul>

I tried this:

$(document).ready(function(){
    $("#theLists img").click(function(){
        var contentId = $(this).closest("input[name='id']").val();   
    });

To no avail. Any Ideas? I need to set a var with the row id, which in this case is "64".

Answer 1

closest(...) gets the closest parent node, not the closest sibling.

There are, in fact, multiple ways to do what you want.

Try these:

var contentId = $(this).siblings("input[name='id']").val();

var contentId = $(this).parent().children("input[name='id']").val();

var contentId = $(this).prev().prev().val();

Answer 2

Nice and cheap:

var contentId = $(this).parents('li:first').find('.contentId').val();

Answer 3

See complete solution here.

You can move the id attribute to the containing <li>, remove the hidden field and just use:

var contentId = $(this).parent().get(0).id;

The advantage here is that in the future you can add other actions, like "edit", etc. without a need to worry about a sibling's position.