jQuery: ¿Cómo obtener el valor más cercano cuando se hace clic en un botón?

Question

Me parece que no puede obtener este código funcione. ¿Cómo puedo obtener el valor más cercano de .abc cuando se hace clic en el botón?

La definición más cercano

es decir: si hace clic en el botón donde "R:" es por lo que quiero un valor de 10. si hace clic en el botón que aparece en la "B:" Quiero que el valor de 20

.

Este es el código:

<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

Hace poco, me escribió un plugin que podría ayudar en esta situación: Se llama nextALL

.

• Blog post sobre ello
• Repostiory Plugin Página
• página de prueba

Se podría utilizar de esta manera:

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

});

Aquí hay un Demostración de Trabajo

Answer 3

Sin tener en cuenta el hecho de que su código HTML está mal formateado con múltiples elementos que tienen el mismo ID, el código JavaScript no hace lo que usted cree. Refiriéndose a http://docs.jquery.com/Traversing/closest , closest() busca el árbol desde donde se encuentre. No hay ningún elemento que cumpla con .abc en el árbol justo encima de cualquiera de los botones. Lo que estás buscando es un vecino y no un padre.

Me gustaría probar algo como esto:

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

pero no soluciona el problema por el que .abc múltiple cerca de un botón específico.

¿Por qué no escribir el código "correctamente" y tiene un botón se refiere directamente a un campo de uso de identificadores y múltiples clases?