Select hidden input from within next td [jQuery]

Question

I have a table layed out like this:

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

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

And what I'm trying to do is, I hover over the hoverable td which turns it into a textbox. Once I hover out I want to check the hidden field for it's original value and put an image in changed if the 2 are different from each other. I already have this:

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

but it doesn't work. What fails apparently is grabbing the value of the hidden field, and I've tried selecting it in several different ways but just can't get to it. Any ideas or tips are gratefully appreciated ;)

Answer 1

Try

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

Answer 2

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

Answer 3

Replace

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

With

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

Answer 4

You need to use .nextAll()

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

Why? Because .next() is taking the next element and seeing if it matches the selector. If you use .nextAll() you get the next element that matches the selector.