Selezionare il prossimo <td> in una tabella utilizzando jQuery

Question

Sto lavorando su un'applicazione asp.net mvc 3. Sto costruendo una tabella in modo dinamico con i dati del database. Ho una certa caso in cui la terza colonna/cella da una riga è una discesa:

<select name="YesNoNotApplicable" class="YesNoNotApplicable"> 
          <option value="1">Yes</option> 
          <option value="2">No</option> 
          <option value="3">Not Applicable</option> 
         </select> 

In questo caso, la quarta colonna/cella rimane vuota e se l'utente seleziona 3 (non applicabile) nella quarta cella dovrebbe essere mostrato una casella di testo in cui l'utente può scrivere ulteriori informazioni. Ho scarsa conoscenza in JS e jQuery, tuttavia ho scoprire come ottenere il valore selezionato da un menu a discesa:

$(document).ready(function() { 
     $('.YesNoNotApplicable').change(function() { 
      alert($('.YesNoNotApplicable').val()); 
     }); 
    }); 

Ma ora invece l'avviso ho bisogno di controllare se il valore è 3 (questo è il fin dove può andare da solo) e per mostrare/nascondere o aggiungere/rimuovere una casella di testo dalla cella successiva o se parliamo in una prospettiva DOM.

Quindi, come posso passare a quello successivo con class = YesNoNotApplicable e qual è il modo migliore per gestire questa casella di testo - per inserirlo nel mentre sto creando la tabella e quindi per mostrare/nascondere o affrontarlo durante il runtime e aggiungerlo/rimuoverlo e come potrei farlo?

Answer 1

Se si utilizza il modello fortemente tipizzato e gli helper html per la visualizzazione, sarebbe probabilmente meglio creare un elemento di input durante la creazione della tabella. Il motivo è che gli elementi che creerai tramite jQuery non saranno associati al tuo modello.

$(document).ready(function() { 
    $('.YesNoNotApplicable').change(function() { 
     if($(this).val() === "3") 
     $(this).closest('td').next('td').find('input').show(); 
    }); 
}); 

Answer 2

All'interno della callback change, this farà riferimento all'elemento select. Così si può trovare il td che lo contiene con closest, e poi la prossima td via next (dal momento che sapere la prossima cosa è un td, si tratta di una tabella), in questo modo:

var $nextTD = $(this).closest('td').next(); 

In più caso generale in cui si desidera fare qualcosa di simile ma non in una tabella, e il fratello che si desidera trovare potrebbe essere più di un elemento di distanza, è possibile utilizzare nextAll("selector").first(). Ma se la cosa che vuoi è l'elemento successivo, e ne sei sicuro, non hai bisogno di nextAll.

Answer 3

$(document).ready(function() { 
    $('.YesNoNotApplicable').change(function() { 
     if($(this).val() === "3"){ 
     $(this).closest('td').next('td').find('input:text').show(); 
     } 
    }); 
}); 

Answer 4

var nextCell = $(this).closest('td').next();

E si può quindi lavorare con il prossimo cel.