jQuery: Come ottenere il valore più vicino quando un tasto è scattato?
Domanda
Non riesco a ottenere il codice per funzionare. Come faccio ad avere il valore più vicino di .abc quando il pulsante viene cliccato?
La definizione più vicino
vale a dire: se si fa clic sul pulsante dove "A:" è che voglio un valore di 10. se si fa clic sul pulsante indicato in "B:" Voglio che il valore di 20
.Ecco il codice:
<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>
Soluzione
Un po 'di tempo fa, ho scritto un plugin che potrebbe aiutare in questa situazione: Si chiama nextALL
.Si potrebbe utilizzare in questo modo:
$(":button").click(function() {
$(this).prevALL("td:has(.abc)").eq(0).find(".abc").val();
});
Altri suggerimenti
$('input.test').click(function() {
$(this).parent()
.prevAll('td:has(input.abc)')
.find('input.abc:last')
.val();
});
Ecco un lavoro Demo
Trascurando il fatto che il codice HTML non è formattato correttamente con più elementi che hanno lo stesso ID, questo codice javascript non fa quello che pensi lo fa. Facendo riferimento a http://docs.jquery.com/Traversing/closest , closest()
cerca il albero da dove ti trovi. Non v'è alcun elemento corrispondente .abc
nell'albero direttamente sopra uno dei tuoi pulsanti. Quello che stai cercando è un vicino di casa e non un genitore.
Vorrei provare qualcosa di simile:
$(".test").click(function() {
$(this).parent().parent().find(".abc").val();
});
, ma non risolve il problema per cui .abc multipla nei pressi di un pulsante specifico.
Perché non basta scrivere il codice "correttamente" e dispone di un pulsante si riferiscono direttamente a un campo utilizzando gli ID e le classi più?