Question

I’m trying to grab the first parent element that matches a class check, but I’m having problems. My page could look like this:

<input id="hidden1" type="hidden" value="5" class="includeds">
<h3>header</h3>
<ul class="groups">
    <li><input id="li1" type="checkbox" value="1" onclick="value()"></li>
    <li><input id="li2" type="checkbox" value="2" onclick="value()"></li>
    <li><input id="li3" type="checkbox" value="3" onclick="value()"></li>
</ul>
<input id="hidden2" type="hidden" value="3" class="includeds">
<h3>header2</h3>
<ul class="groups">
    <li><input id="li4" type="checkbox" value="4" onclick="value()"></li>
    <li><input id="li5" type="checkbox" value="5" onclick="value()"></li>
    <li><input id="li6" type="checkbox" value="6" onclick="value()"></li>
</ul>

So if I click on checkbox li1, I want to retrieve the value "5" from the hidden field above it.

If I click li5, I want to get the value of "2" from the first hidden field above it, etc, etc.

I’m trying this (inside the value() function), but it’s not working, I keep receiving an undefined error.

var thevalue = $(this).closest(".includeds").value);

or

var thevalue = $(this).closest(".includeds").attr("value").toString());

I don’t understand why they aren’t working, any ideas? Thanks for any help.

Answer 1

I got this working with your markup:

var value = $(this).closest('ul').prevAll('.includeds:first').val();

Live example: http://jsfiddle.net/xfE8B/