views:

349

answers:

3

I can't seem to get this code to work. How do I get the closest value of .abc when the button is clicked?

Defining Closest

ie: if you click the button where "A:" is at I want a value of 10. if you click the button listed in "B:" I want the value of 20.

Here is the code:

<script type="text/javascript">
$(function(){

 $('.test').click(function(){
  var value = $(this)
     .parent()
     .parent()
     .closest(".abc")
     .attr("value")
  alert(value);
  return false
 });

});
</script>
<form name="myform">
<table>
 <tr>
     <td>A:</td>
        <td><input type="text" class="abc" name="a" id="a" value="10" /></td>
        <td><input type="text" name="vbn" id="vbn" /></td>
        <td><input type="text" name="mkl" id="mkl" /></td>
        <td><input type="button" class="test" name="test" id="test" value="test" /></td>
        <td>B:</td>
        <td><input type="text" class="abc" name="b" id="b" value="20" /></td>
        <td><input type="text" name="ews" id="ews" /></td>
        <td><input type="text" name="hrs" id="hrs" /></td>
        <td><input type="text" name="ew3" id="ew3" /></td>
        <td><input type="text" name="3ws" id="3ws" /></td>
        <td><input type="button" class="test" name="test" id="test" value="test" /></td>
    </tr>
    <tr>
     <td>C:</td>
        <td><input type="text" class="abc" name="c" id="c" value="30" /></td>
        <td><input type="text" name="oiu" id="oiu" /></td>
        <td><input type="text" name="dfe" id="dfe" /></td>
        <td><input type="button" class="test" name="test" id="test" value="test" /></td>
    </tr>
    <tr>
     <td>D:</td>
        <td><input type="text" class="abc" name="d" id="d" value="40" /></td>
        <td><input type="button" class="test" name="test" id="test" value="test" /></td>
    </tr>
</table>
</form>
+2  A: 

A little while ago, I wrote a plugin which might help in this situation: It's called nextALL.

You'd use it like this:

$(":button").click(function() {
    $(this).prevALL("td:has(.abc)").eq(0).find(".abc").val();
});
nickf
Nice job on the plugin!
fudgey
Thank you nickf!!!
nolabel
+3  A: 
$('input.test').click(function() {

    $(this).parent()
           .prevAll('td:has(input.abc)')
           .find('input.abc:last')
           .val();

});

Here's a Working Demo

Russ Cam
It looks like the problem is A: and B: are in the same row, so clicking that test button always returns the `.abc` value associated with A:
fudgey
@fudgey, yeah that solution would be nice... it is so close, yet it is so far away. =/
nolabel
now fixed- realised that just after I posted it! :)
Russ Cam
@nolabel - not any more :)
Russ Cam
A: 

Disregarding the fact that your html code is improperly formatted with multiple elements having the same ID, this javascript code doesn't do what you think it does. Referring to http://docs.jquery.com/Traversing/closest, closest() looks up the tree from where you are. There is no element matching .abc in the tree directly above any of your buttons. What you're looking for is a neighbor and not a parent.

I would try something like this:

$(".test").click(function() {
  $(this).parent().parent().find(".abc").val();
});

but it does not solve your issue where multiple .abc near a specific button.

Why not just write the code "correctly" and have a button directly refer to a field using IDs and multiple classes?

Brandon Belvin
@Brandon, thanks for catching the multiple element with the same ID. I can fix that, but your solution has the same problem as Russ Cam.
nolabel
Please see the update to my answer, it provides a valid and corrct solution
Russ Cam