jQuery: Comment obtenir la valeur la plus proche quand un bouton est cliqué?

Question

Je ne peux pas sembler obtenir ce code fonctionne. Comment puis-je obtenir la valeur la plus proche de .abc lorsque le bouton est cliqué?

Définir le plus proche

à savoir: si vous cliquez sur le bouton où « A: » est à Je veux une valeur de 10. si vous cliquez sur le bouton figurant dans « B: » Je veux que la valeur de 20

.

Voici le 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

Il y a un peu de temps, je l'ai écrit un plugin qui pourrait aider dans cette situation: Il appelle nextALL

.

• Blog post à ce sujet
• Repostiory Plugin
• Page de démonstration

Vous utiliseriez comme ceci:

$(":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();

});

Voici un travail Démo

Answer 3

Abstraction faite du fait que votre code HTML est incorrectement formaté avec plusieurs éléments ayant le même ID, ce code javascript ne fait pas ce que vous pensez. Se référant à http://docs.jquery.com/Traversing/closest , closest() recherche la arbre d'où vous êtes. Il n'y a aucun élément .abc correspondant dans l'arbre directement au-dessus l'un de vos boutons. Qu'est-ce que vous cherchez est un voisin et non un parent.

Je voudrais essayer quelque chose comme ceci:

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

mais il ne résout pas votre problème avec plusieurs .abc près d'un bouton spécifique.

Pourquoi ne pas simplement écrire le code « correctement » et ont un bouton directement référence à un champ en utilisant ID et plusieurs classes?