JQuery: Wie bekomme ich den nächsten Wert, wenn eine Schaltfläche angeklickt wird?

Question

Ich kann diesen Code nicht zum Laufen bringen. Wie erhalte ich den nächsten Wert von .ABC, wenn die Schaltfläche klickt?

Am nächsten definieren

IE: Wenn Sie auf die Schaltfläche klicken, auf der "A:" ist, möchte ich einen Wert von 10. Wenn Sie auf die in "B:" aufgeführte Schaltfläche klicken, möchte ich den Wert von 20.

Hier ist der 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>

Answer 1

Vor einiger Zeit habe ich ein Plugin geschrieben, das in dieser Situation helfen könnte: Es heißt Nextall.

• Blog -Beitrag darüber
• Repostiory Plugin -Seite
• Demo -Seite

Sie würden es so verwenden:

$(":button").click(function() {
    $(this).prevALL("td:has(.abc)").eq(0).find(".abc").val();
});

Answer 2

$('input.test').click(function() {

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

});

Hier ist ein Arbeitsdemo

Answer 3

Wenn Sie die Tatsache nicht berücksichtigen, dass Ihr HTML -Code mit mehreren Elementen mit derselben ID nicht ordnungsgemäß formatiert ist, tut dieser JavaScript -Code nicht das, was Sie glauben. In Bezug auf http://docs.jquery.com/traversing/closest, closest() schaut den Baum hoch, von wo du bist. Es gibt kein Element -Matching .abc im Baum direkt über einer Ihrer Tasten. Was Sie suchen, ist ein Nachbar und kein Elternteil.

Ich würde so etwas versuchen:

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

Aber es löst Ihr Problem nicht, bei dem mehrere .ABC in der Nähe einer bestimmten Taste.

Schreiben Sie nicht einfach den Code "richtig" und lassen Sie sich eine Schaltfläche direkt mit IDs und mehreren Klassen auf ein Feld beziehen?