Sélectionnez l'entrée cachée à l'intérieur suivant td [jQuery]

Question

J'ai une table layed comme ceci:

 <td> 
       somename 
     </td> 
     <td class="hoverable value" > 
       somevalue 
     </td> 
     <td class="changed"> 

     </td> 
     <td class="original value"> 
      <input type="hidden" value="somevalue" /> 
     </td> 

Et ce que je suis en train de faire est, je Survoler la hoverable td qui se transforme en un zone de texte. Une fois que je suis sorti, je veux vérifier le champ caché pour sa valeur d'origine et mettre une image si les 2 sont différents les uns des autres. J'ai déjà ceci:

$(document).ready(function() { 
    var newHTML = ''; 

    $('table td.hoverable').hover(
    function() { 
     var oldHTML = $(this).html().trim(); 
     $(this).html('<input type=\'text\' value=\'' + oldHTML + '\' size=\'' + ((oldHTML).length + 2) +'\' />'); 
    }, 
    function() { 
     newHTML = $('input', this).val(); 
     var oldHTML = $(this).next('td.original').children('hidden').val(); 
     if(newHTML != oldHTML) { 
      $(this).next('td.changed').html('Changed'); 
     } 
     $(this).html(newHTML); 
    }) 
}); 

mais cela ne fonctionne pas. Ce qui échoue, apparemment, c'est de saisir la valeur du champ caché, et j'ai essayé de le sélectionner de différentes manières, mais je ne peux pas y arriver. Toutes les idées ou conseils sont grandement appréciés;)

Answer 1

Vous devez utiliser .n extAll()

var oldHTML = $(this).nextAll('td.original').find('input:hidden').val(); 

Pourquoi? Parce que .next() prend l'élément suivant et voit si elle correspond au sélecteur. Si vous utilisez .nextAll() vous obtenez l'élément suivant qui correspond au sélecteur.

Answer 2

Essayez

$(this).next('td.original').find('input:hidden').val(); 

Answer 3

var oldHTML = $(this).next('td.original').children(':hidden').val(); 

Answer 4

Replace

var oldHTML = $(this).next('td.original').children('hidden').val(); 

Avec

var oldHTML = $(this).next('td.original').find('input:hidden').val();